Webpack upgrade and optimization path

Recently, the webpack3 in the project has been upgraded to Webpack5, and the packaging configuration has been adjusted and optimized. Multi-page projects are packaged by module independent version number, avoiding repackaging all modules every time and reducing the risk of the project going online. In this process, I met some problems and learned some things.

A pit encountered when upgrading webpack5

We encountered a series of problems in upgrading the weback of the project from 3 to 5. Here are two solutions to these problems.

1. Compatibility problems of extract-text-webpack-plugin

2. Webpack-dev-server compatibility problem

extract-text-webpack-plugin

Upgrade to webpack5, run the package directly error, as follows:

This is because the “extract-text-webpack-plugin” is no longer used in webpack4 +, it should be “mini-CSs-extract-plugin”.

Put the original code:

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'          })
      }
    ]
  }
}
Copy the code

Adjusted for

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"
        ]
      }
    ]
  }
}
Copy the code

Webpack-dev-server compatibility problem

Error when NPM run dev starts service

This is because the current version of Webpack-dev-server does not support WebPack 5.0 and Webpack-cli4.0, and the startup command needs to be modified.

The original code:

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

Copy the code

To:

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

Package multi-page projects by module independent version number

The original project is a multi-entry project, and the file names of all module package files are all hash with the same version number (Hash is related to the construction of the whole project, and all files have the same hash value. When files in the project are changed, the hash will change), which will result in: Even if you change the code in just one module, the code in the other modules will be repackaged, generating packaged files with different version numbers (ETag changes), and the risk becomes higher as more files are affected.

Webpack configuration:

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

Package output file:

Use Chunkhash as the version number

Chunkhash can add hashes based on the module contents, and no new hashes will be generated as long as the module contents remain unchanged.

Chunkhash is used as the file name version number of the packaged output file, so that files packaged by different modules have their own different version numbers. After changing the code, only the version number of the affected module is changed, while the version number of other modules remains unchanged and the file name remains unchanged, which will be directly removed from the cache without being affected. (The version number is used to obtain the latest file every time the code is modified and repackaged to generate a different file name.)

Webpack configuration:

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

Package output file:

Detailed content can be seen: multi-page project optimization Webpack packaging to reduce the risk of online

This article is participating in the “Nuggets 2021 Spring Recruitment Campaign”, click to see the details of the campaign