background

When the team was developing, I found it was very slow to start the project service NPM run Dev. I tried it, and it took 30 or 40 seconds, which would reduce the development efficiency for our development. Currently, we are using Webpack 3, so I want to try to upgrade Webpack to improve the speed of compilation and packaging

Note: The code mostly refers to the network, you can see the link below

research

Webpack3 upgrade to Webpack4, still made a lot of changes, I query the information summarized as follows (of course, more than the following changes) :

Problems encountered during the upgrade and troubleshooting

Problem a

Error: webpack.optimize.CommonsChunkPlugin has been removed, please use config.optimization.splitChunks instead.

Solution: webpack4 no longer supports CommonsChunkPlugin, but uses splitChunks instead. What is the difference? Why scrap the previous one, use splitChunks?

Here is a paper job

According to the information I found, CommonsChunkPlugin has the following problems:

  • CommonsChunkPluginWe’ll extract some code that we don’t need
  • It is inefficient on asynchronous modules
  • Difficult to use and difficult to understand

In contrast, splitChunks have the following characteristics:

  • It does not package modules that are not needed
  • Valid for asynchronous modules (turned on by default)
  • Easier to use and more automated

We usually configure CommonsChunkPlugin as follows:

new webpack.optimize.CommonsChunkPlugin({
  name: 'vendor'// introduce node_modules dependencies to minChunks:function (module, count) {
    // any required modules inside node_modules are extracted to vendor
    return(module.resource && /\.js$/.test(module.resource) && module.resource. IndexOf (path.join(__dirName, '.. // node_modules')) === 0)} // chunks: 2Copy the code

SplitChunks are usually used as follows

Optimization: {splitChunks: {// splitChunks: {common: {name:"commons",
          chunks: "initial",
          minChunks: 2
        }
      }
    }
  }
Copy the code

Question 2

Error: Plugin could not be registered at 'compile'. Hook was not found. BREAKING CHANGE: There need to exist a hook at 'this.hooks'. To create a compatibility layer for this hook, hook into 'this._pluginCompat'.

Solution: This issue is version-dependent and can be resolved by upgrading webpack-dev-server to 3.1.0.

NPM [email protected] - I D

Question 3

Error: Chunk.entrypoints: Use Chunks.groupsIterable and filter by instanceof Entrypoint instead

Solution: This is because webPack 4 no longer supports the extract-CSs-chunk-webpack-plugin, we can use the mini-CSs-extract-plugin instead

-const ExtractCssChunks = require('extract-css-chunks-webpack-plugin')
+const MiniCssExtractPlugin = require("mini-css-extract-plugin");

module.exports = {
  name: 'client',
  target: 'web',
  module: {
    rules: [
      {
        test: /\.css$/,
-       use: ExtractCssChunks.extract({
-         use: 'css-loader'
-       })
+       use: [
+         {
+           loader: MiniCssExtractPlugin.loader,
+         },
+         "css-loader"
+       ]
      }
    ]
  },
// 
// other config........
//
   plugins: [
-    new ExtractCssChunks(),
+    new MiniCssExtractPlugin({
+        filename: `components/[name].css`
+    }),
     //
     // other config........
     //
   ]
Copy the code

Question 4

Error: Chunk.initial was removed. Use canBeInitial/isOnlyInitial() at Chunk.get initial

Update “webpack-manifest-plugin”: “^1.3.2” to “webpack-manifest-plugin”: “^2.0.4”

Question 5

Error: webpack.optimize.UglifyJsPlugin has been removed, please use config.optimization.minimize instead.

Solution: Webpack 4 has abolished the previous UglifyJsPlugin, replacing it with Optimization. Minimize

Modify before:

 plugins: [
    new webpack.optimize.UglifyJsPlugin({
      sourceMap: true,
      compress: {
        warnings: false,}}),]Copy the code

Revised:

const UglifyJsPlugin = require('uglifyjs-webpack-plugin');

  optimization: {
    minimizer: [
      new UglifyJsPlugin({
        sourceMap: true,
        compress: {
          warnings: false,},}),],}Copy the code

Question 6

WARNING in configuration The 'mode' option has not been set, webpack will fallback to 'production' for this value. Set 'mode' option to 'development' or 'production' to enable defaults for each environment. You can also set it to 'none' to disable any default behavior. Learn more: https://webpack.js.org/concepts/mode/

This configuration item has three configuration values: development, Production, and None. The default value is None.

We can set it as follows:

    "dev": "webpack --mode development"."build": "webpack --mode production"
Copy the code

In this way, instead of using cross-env and DefinePlugin to distinguish between production environment and development environment, we can directly use the value of process.env.node_env to distinguish between production environment and development environment. In production, the value is production

The results of

After a round of upgrading down, finally no error, let’s see if we have reached our goal

Previous NPM Run Dev

NPM run Dev after upgrade

In addition to upgrading Webpack, there must be other performance optimization points, such as DLL, Happy Pack and so on. In the next article, we will discuss these optimization methods

Reference:

www.itread01.com/content/153…

Stackoverflow.com/questions/5…

Github.com/wuweijia/wu…

Webpack.js.org/configurati…

Welcome to pay attention to my wechat public number — front end big Grocery Store