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…

歡迎你們關注個人微信公衆號——前端大雜貨鋪