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 等等，下一篇文章咱们就来探讨一下这些优化的手段

参考：

www.itread01.com/content/153…

stackoverflow.com/questions/5…

github.com/wuweijia/wu…

webpack.js.org/configurati…

欢迎你们关注个人微信公众号——前端大杂货铺