webpack升级与优化之路

最近将项目中的webpack3升到了webpack5，并且对打包配置进行了调整优化，分模块独立版本号打包多页面项目，避免每次重新打包所有模块，降低了项目上线的风险。在这个过程中既遇到了一些问题，也学到了一些东西。

升级webpack5遇到的坑

将项目的weback从3升到5，遇到了一系列的问题，这里分享两个问题的解决方案。

1.extract-text-webpack-plugin兼容问题

2.webpack-dev-server兼容问题

extract-text-webpack-plugin

升到webpack5后，运行打包直接报错，如下：

这是因为webpack4以上的版本不再使用“extract-text-webpack-plugin”，应该改成用“mini-css-extract-plugin”

将原代码：

const ExtractTextPlugin = require('extract-text-webpack-plugin');
module.exports = {
  plugins: [
     new ExtractTextPlugin({ filename:'[name].css', disable: false, allChunks: true })
  ],
  module: {
    loaders: [      
        {
        test: /\.css$/,
        use: ExtractTextPlugin.extract({
               fallback:'style-loader',               
               use:'css-loader!less-loader'          })
      }
    ]
  }
}

调整为

const MiniCssExtractPlugin = require("mini-css-extract-plugin");
module.exports = {
  plugins: [
    new MiniCssExtractPlugin({
      // Options similar to the same options in webpackOptions.output
      // both options are optional
      filename: "[name].css",
      chunkFilename: "[id].css"
    })
  ],
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          MiniCssExtractPlugin.loader,
          "css-loader"
        ]
      }
    ]
  }
}

webpack-dev-server兼容问题

在npm run dev 启动服务的时候报错

这是因为目前webpack-dev-server版本不支持webpack5.0和webpack-cli4.0，需要修改启动命令。

原代码：

"scripts": {    
        "dev": "webpack-dev-server --config webpack.config.dev.js",    
        "build": "webpack --config webpack.config.prod.js"  
},

改为：

"scripts": {    
     "dev": "webpack serve --mode development --env development --config webpack.config.dev.js",    
     "build": "webpack --config webpack.config.prod.js"  
}

分模块独立版本号打包多页面项目

原项目是一个多入口项目，打包时所有模块打包文件的文件名中都是用的统一的版本号hash （hash跟整个项目的构建相关，所有文件哈希值相同，当项目中有文件被更改后，hash会改变），这样会导致：即使只是修改了一个模块中的代码，其他模块的代码也会被重新打包，生成带有不同的版本号的打包文件(ETag改变)，受影响的文件多了，风险也就高了。

webpack配置：

output: {
        path: path.resolve( __dirname,"dist"),
        publicPath: '/dist/',
        filename: '[name]-[hash:7].js'
    },

打包输出文件：

使用chunkhash作为版本号

chunkhash可以根据模块内容来添加哈希值，只要模块内容没有变，就不会生成新的哈希值。

利用chunkhash作为打包输出文件的文件名版本号，这样不同模块打包出的文件都拥有了各自不同的版本号，更改代码后也只是改变的所影响模块的版本号，其他模块的版本号不变，文件名不变，会直接走缓存，不会受影响。（版本号就是为了每次修改代码重新打包生成不同文件名可以获取到最新的文件）

webpack配置：

 output: {
        path: path.resolve( __dirname,"dist"),
        publicPath: '/dist/',
        filename: '[name]-[chunkhash:7].js'
    },

打包输出文件：

详细内容可见:多页面项目优化webpack打包降低上线风险

本文正在参与「掘金 2021 春招闯关活动」, 点击查看活动详情

webpack升级与优化之路｜项目复盘