webpack3 升级到 webpack4 小记

团队开发的时候，发现启动项目服务 npm run dev 很慢，我试了一下，要三四十秒，这对于我们开发来讲，会导致开发效率下降很多，而我们目前使用的是 webpack3 ，所以我想尝试通过升级 webpack 来提升一下编译打包的速度

注：代码大部分参照网络，可以在后面看到链接

调研

webpack3 升级到 webpack4 的话，还是做了很大的改动，我查询资料总结如下（当然不止以下改动）：

升级过程遇到的问题以及解决

问题 一

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

解决方法： 在 webpack4 中不再支持 CommonsChunkPlugin ，而是使用 splitChunks 替代，那么这两者有什么区别？为什么要废弃之前的，使用 splitChunks 的呢？

这里纸上谈兵一下

根据我查到的资料显示， CommonsChunkPlugin 存在以下的问题：

CommonsChunkPlugin

相比， splitChunks 具有以下特点：

• 它不会打包不需要的模块
• 对异步模块有效（默认情况下是打开的）
• 更加容易使用和更加自动化

我们平时配置 CommonsChunkPlugin 如下：

new webpack.optimize.CommonsChunkPlugin({
  name: 'vendor',
  // 引入node_modules的依賴全抽出來
  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
    )
  }
  // 或者直接minChunks: 2，重復模塊大於2的全部抽出來
})
复制代码

平时使用 splitChunks 如下

optimization: {
    splitChunks: {
      // 抽離入口文件公共模塊為commmons模塊
      cacheGroups: {
        commons: {
          name: "commons",
          chunks: "initial",
          minChunks: 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'.

解决方法： 这个问题是依赖版本的问题，将 webpack-dev-server 升级到 3.1.0 就可以解决了。

npm i webpack-dev-server@3.1.0 -D

问题三

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

解决方法： 这个是因为 webpack 4 不再 支持 extract-css-chunks-webpack-plugin ，我们可以使用 mini-css-extract-plugin 替代

-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........
     //
   ]
复制代码

问题 4

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

解决方法：升级 "webpack-manifest-plugin": "^1.3.2" 到 "webpack-manifest-plugin": "^2.0.4"

问题 5

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

解决方法： webpack 4 已经废除了 之前 UglifyJsPlugin ，用 optimization.minimize 替代

修改前：

plugins: [
    new webpack.optimize.UglifyJsPlugin({
      sourceMap: true,
      compress: {
        warnings: false,
      },
    }),
  ]
复制代码

修改后：

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

  optimization: {
    minimizer: [
      new UglifyJsPlugin({
        sourceMap: true,
        compress: {
          warnings: false,
        },
      }),
    ],
  }
复制代码

问题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/

解决方法： 这是一个 warnning ， webpack 4 一些默认的配置需要通过 mode 配置启用，这个配置项有三个配置值， development 、 production 和 none ，默认为 none ，借用官网的一张图了解下它们的区别：

我们可以设置如下：

"dev": "webpack --mode development",

    "build": "webpack --mode production"
复制代码

这样我们就可以不用使用 cross-env 和 DefinePlugin 去做生产环境和开发环境的判别，我们可以直接使用 process.env. NODE_ENV 的值进行判别，开发环境值下为 development ，生产环境下值为 production

结果

经过一轮升级下来，终于没有报错了，我们来看下有没有达到我们的目标

之前的 npm run dev

升级之后的 npm run dev

才提升 8s，不得不说，问题根源并不在于此，除了升级 webpack 之外，肯定是还有其他方面性能优化的点，比如 dll ， happy pack 等等，下一篇文章我们就来探讨一下这些优化的手段