webpack打包jquery项目

作者: 六时未至 | 来源:发表于2022-12-19 16:34 被阅读0次

webpack学习笔记
webpack简单使用
Cannot find module 'webpack-cli/
Webpack打包结果分析
webpack中引入jQuery
vue-webpack项目配置以及打包流程详解
2020-09-18vue-cli项目之webpack打包(bu
webpack 压缩打包 vue.js 项目懒加载快速加载页
webpack
webpack学习笔记- 深入学习

最近遇到了原有jquery的非前后端分离项目，要改为前后端分离项目，并且引入微前端架构对新增功能进行支持。
本文章将介绍如何将jquery项目进行前后端拆分，如何使用webpack进行打包。
特别说明：
因为我们页面量很大，工期紧，并没有按照标准的多页面打包方式进行打包。我们还是只有一个入口，入口中引入了公共的css，js等。其他的js文件依然以script标签的形式引入。缺点是每个静态资源就是一次http请求，加载慢。优点：改动量较小。
当然，你也可以使用标准的多页配置，为每个html配置一个入口js文件。

一、前后端代码拆分

1. 初始化npm，安装webpack

1.1 执行npm init按照提示初始化package.json
1.2 初始化成功之后可以看到目录下多了package.json

package.PNG
1.3 执行npm install webpack webpack-cli webpack-dev-server -D安装webpack全家桶，安装成功之后可以看到多了node_modules文件夹，package.json中也有了我们刚刚安装的依赖。

package.json.png
1.4 jquery项目可以安装jquery依赖，无需每个html单独引入jquery。这里版本号可以根据实际需要修改。
执行npm install jquery@3.5.0

2. 将jquery代码拆分出来，建议将代码按照自己的代码规范进行拆分。

这里以vue项目结构举例。
2.1 在项目根路径下创建public和src文件夹，并创建js，css，html存放的文件夹，main.js以及index.html入口文件。public文件夹可以放置项目中引入的一些第三方插件。

目录结构.png

2.2 可以将项目中html代码放到views下，将js静态资源放到static下，将css等静态资源放到assets下。我这里建了一个简单的html文件，进行举例。

将jquery项目拆分出来.png

2.3 编写入口文件
jquery项目添加路由，可以参照另一篇文章。

mainJs.png

indexHtml.png

3. 进行webpack配置

在项目根路径下创建webpack.config.js(本示例使用webpack5进行配置，其他版本可以参照官网进行配置)
3.1 配置出入口

const path = require('path')
const { name } = require('./package.json')
module.exports = {
  mode: 'development',
  // 入口js
  entry: ['./src/main.js'],
  output: {
    publicPath: './',
    path: path.resolve(__dirname, './dist'),
    filename: '[name].bundle.js',
    // 每次打包清空原打包路径内容
    clean: true,
    // 打包静态资源的文件名
    assetModuleFilename: 'assets/[name].[hash:6][ext]',
    // 进行ie浏览器支持
    environment: {
      arrowFunction: false
    }
  }
}

3.2 配置模块
这一部分需要安装各种loader，如下：expose-loader，babel-loader，css-loader，style-loader，html-loader, @babel/core,@babel/preset-env

module: {
    rules: [
      // 配置jquery,不需要在html在引入jquery的js文件
      {
        test: require.resolve('jquery'),
        use: [{
          loader: 'expose-loader',
          options: {
            exposes: ['$', 'jQuery']
          }
        }]
      },
      // 配置js转译，需要安装loader
      {
        test: /\.js$/,
        exclude: /(node_modules|bower_components)/, // 排除依赖中js文件，提高转译效率
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env']
          }
        }
      },
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader']
      },
      // 因为原html中可能加载jsp语法，可以使用html-loader进行转译
      {
        test: /\.html$/,
        include: path.resolve(__dirname, 'src/views'), // 因为html文件都放到了views下面，所以只对下面的html进行解析
        use: {
          loader: 'html-loader',
          options: {
            minimize: true
          }
        }
      },
      // webpack5新增的配置，可以将图片转为base64，无需使用loader
      {
        test: /\.(png|jpg|gif)$/,
        type: 'asset/inline'
      }
    ]
  }

3.3 配置插件
这里也是需要安装一些依赖，如下：node-polyfill-webpack-plugin，progress-bar-webpack-plugin，html-webpack-plugin

const NodePolyfillPlugin = require('node-polyfill-webpack-plugin')
const WebpackBarPlugin = require('progress-bar-webpack-plugin')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const glob = require('glob')
// 获取全部html文件
const allHtml = glob.sync('src/views/**/*.html')


plugins: [
    // webpack5默认不在提供polyfill，可以引入此插件，配合其他配置来支持ie
    new NodePolyfillPlugin(),
    // 这里是展示进度，进度条展示*,如果不需要展示，也可以不设置
    new WebpackBarPlugin({
      complete: '*'
    }),
    // 使用htmlWebpackPlugin为html文件自动插入打包后的静态资源
    new HtmlWebpackPlugin({
      title: '我的测试项目',
      template: './public/index.html',
      filename: 'index.html'
    }),
    ...allHtml.map((item) => {
      item = item.split('src/')[1]
      return new HtmlWebpackPlugin({
        title: item.split('/').join(''),
        template: `./src/${item}`,
        inject: 'head',
        filename: item,
        projectPath: 'static'
      })
    })
  ]

3.4 配置devServer，可以本地启动jquery前端项目

 // 前端本地启动代理
  devServer: {
    compress: true, // 是否启用gzip压缩
    hot: true, // 是否热启动
    static: path.join(__dirname, './src'), // 允许配置从目录提供静态文件的选项
    proxy: { // 代理配置
      '/api': {
        target: 'http://******:****',
        changeOrigin: true, // 允许跨域
        pathRewrite: {
          '^/api': ''
        }
      }
    }
  }

3.5 兼容IE配置
除了上述loader，babel配置之外，还需要做如下配置：

// webpack5新增配置项，可以兼容ie
  target: ['web', 'es5']

安装core-js，我用的是3.24.1版本，执行npm install core-js
在main.js入口文件中添加

// 兼容ie
import 'core-js/stable'
import 'regenerator-runtime/runtime'

到这里，我们的jquery项目配置项就可以结束了。

4. 启动及打包

那么，接下来，在package.json中添加启动命令，就可以启动了。
4.1 在package.json的scripts中添加"serve": "webpack serve --config webpack.config.js",这里的配置文件也可以不指定，默认使用webpack.config.js。
执行npm run serve 启动。

image.png

启动之后就可以在浏览器中查看效果了。这里是我在index.html中写的几个文字。

成功启动.png

4.2 在package.json的scripts中添加"build": "webpack build --config webpack.config.js",这里的配置文件也可以不指定，默认使用webpack.config.js。
执行npm run build进行项目打包，打包之后可以看到产物如下：