如何優(yōu)雅的升級(jí)到 webpack4

zhangfaliang 發(fā)布于2019-08-22 18:36 / 2698人閱讀

摘要：默認(rèn)出入口在中，不再強(qiáng)制要求指定和路徑。構(gòu)建模式提供了兩種構(gòu)建模式可供選擇和選項(xiàng)描述會(huì)將的值設(shè)為。如果是，那就會(huì)開啟。默認(rèn)只會(huì)對(duì)按需加載的代碼做分割。在或更低版本中，如果你想為一個(gè)推導(dǎo)出來的定制選項(xiàng)，你不得不在自己的選項(xiàng)中將它重復(fù)一遍。

前言

現(xiàn)在距離2018年2月15號(hào)webpack4.0.0出來已經(jīng)有一段時(shí)間了，現(xiàn)在已經(jīng)出了 @vue/cli 3.0，但是樓主還沒試過，聽說很強(qiáng)大，想要試水的可以看文檔 @vue/cli，官方腳手架都用上webpack4了，你項(xiàng)目還停留在webpack3，甚至webpack2，是不是覺得落伍了。
受號(hào)稱0配置的parcel啟發(fā)，webpack4 增加了一些默認(rèn)配置，摒棄掉了一些難懂的配置，對(duì)用戶更加友好，下面我來講一講比較大的一些變化

環(huán)境

不再支持 Node.js 4。

默認(rèn)出入口

在 Webpack 4 中，不再強(qiáng)制要求指定 entry 和 output 路徑。webpack 4 會(huì)默認(rèn) entry 為 ./src，output 為 ./dist，當(dāng)然了，這只是開胃菜。

mode 構(gòu)建模式

webpack 提供了兩種構(gòu)建模式可供選擇 development 和 production

選項(xiàng)	描述
development	會(huì)將 process.env.NODE_ENV 的值設(shè)為 development。啟用 NamedChunksPlugin(固化 runtime 內(nèi)以及在使用動(dòng)態(tài)加載時(shí)分離出的 chunk 的 chunk id) 和 NamedModulesPlugin(開啟 HMR[熱重載]的時(shí)候使用該插件會(huì)顯示模塊的相對(duì)路徑)。
production	會(huì)將 process.env.NODE_ENV 的值設(shè)為 production。啟用 FlagDependencyUsagePlugin, FlagIncludedChunksPlugin, ModuleConcatenationPlugin, NoEmitOnErrorsPlugin, OccurrenceOrderPlugin, SideEffectsFlagPlugin 和 UglifyJsPlugin.

也就是說如果 mode 為development 時(shí)候官方腳手架可以砍掉的代碼

// webpack.development.config.js
module.exports = {
+ mode: "development"
- plugins: [
-   new webpack.NamedModulesPlugin(),
-   new webpack.DefinePlugin({
-     "process.env": require("../config/dev.env")
-   }),
- ]
}

如果 mode 為production 時(shí)候官方腳手架可以砍掉的代碼

 // webpack.production.config.js
module.exports = {
+  mode: "production",
-  plugins: [
-    new UglifyJsPlugin(/* ... */),
-    new webpack.DefinePlugin({
-       "process.env": require("../config/dev.env")
-    }),
-    new webpack.optimize.ModuleConcatenationPlugin()
-  ]
}

import(): 動(dòng)態(tài)導(dǎo)入

在 webpack 4 中，import() 會(huì)返回一個(gè)帶命名空間(namespace)的對(duì)象，這對(duì) ES Module 不會(huì)有影響，但對(duì)于遵循 commonjs 規(guī)范的模塊則會(huì)加一層包裹：

// webpack 2/3
import("./commonjs").then(exports => {
    // ...
})

// webpack 4
import("./commonjs").then({default: exports}=> {
    // ...
})

optimization 配置項(xiàng)

配置項(xiàng)新增了 optimization 選項(xiàng)，智能的根據(jù)所選模式mode為做運(yùn)行優(yōu)化。

使用這個(gè)配置的時(shí)候之前的一些插件可以使用 optimization 里的配置代替

NoEmitOnErrorsPlugin 替換為 optimization.noEmitOnErrors （默認(rèn)只在 production 模式）

ModuleConcatenationPlugin 替換為 optimization.concatenateModules（默認(rèn)只在 production 模式）

NamedModulesPlugin 替換為 optimization.namedModules（默認(rèn)只在 develoment 模式）

CommonsChunkPlugin 插件被棄用，使用 optimization.splitChunks, optimization.runtimeChunk 代替

// webpack.prod.conf.js
const config = {
   // ...
   plugins: [
-    new webpack.NoEmitOnErrorsPlugin(),
-    new webpack.optimize.ModuleConcatenationPlugin(),    // 預(yù)編譯
-    new webpack.optimize.CommonsChunkPlugin({
-      name: "vendor",
-      minChunks (module) {
-        // 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
-        )
-      }
-    }),
-    new webpack.optimize.CommonsChunkPlugin({
-      name: "manifest",
-      minChunks: Infinity
-    }),
   ],
+  optimization: {
+    noEmitOnErrors: true,
+    concatenateModules: true,
+    splitChunks: { 
+       chunks: "all", 
+       name: "common", 
+    }, 
+    runtimeChunk: { 
+        name: "runtime"
+    }
+  }
};

// webpack.dev.conf.js
const config = {
   // ...
   plugins: [
-    new webpack.NamedModulesPlugin()
   ]
+  optimization: {
+    namedModules: true
+  }
};

optimization.splitChunks 默認(rèn)是不用設(shè)置的。如果 mode 是 production，那 Webpack 4 就會(huì)開啟 Code Splitting。默認(rèn) Webpack 4 只會(huì)對(duì)按需加載的代碼做分割。如果我們需要配置初始加載的代碼也加入到代碼分割中，可以設(shè)置 splitChunks.chunks 為 "all"

壓縮

webpack4 的mode 設(shè)置成 production 時(shí)，默認(rèn)開啟代碼壓縮，但是我要敲黑板，劃重點(diǎn)了，uglifyjs-webpack-plugin 終于到 v1.0.0 版本了，支持多進(jìn)程壓縮，緩存以及es6語法，無需多帶帶安裝轉(zhuǎn)換器。感動(dòng)不感動(dòng)。想看的話可以看這里順風(fēng)車。想要覆蓋配置可以這樣

const UglifyJsPlugin = require("uglifyjs-webpack-plugin")

module.exports = {
  // ...
  optimization: {
    minimizer: [
      new UglifyJsPlugin() // 具體配置可看github
    ]
  }
}

移除的功能

移除了 module.loaders
移除了 loaderContext.options
移除了 Compilation.notCacheable
移除了 NoErrorsPlugin
移除了 Dependency.isEqualResource
移除了 NewWatchingPlugin
移除了 CommonsChunkPlugin

周邊

既然講了 webpack 做了比較大的更新，周邊的配套設(shè)施也不要不舍得，改換久換，由于我平時(shí)項(xiàng)目中使用vue，如果你也使用vue的話，那么針對(duì)vue的有幾個(gè)變化你要知道：

vue-loader

什么？學(xué)不動(dòng)了，只要用官網(wǎng)的腳手架不就好了？前端的知識(shí)不斷更新，固步自封，只會(huì)不進(jìn)則退。但是你要相信，webpack也好，vue-loader 也好，api 會(huì)越來越好懂，性能也會(huì)更加高效，所以，扶我起來，我還能學(xué)。。。

Vue Loader v15 使用了一個(gè)不一樣的策略來推導(dǎo)語言塊使用的 loader。vue-loader v15
在 v14 或更低版本中，如果你想為一個(gè)推導(dǎo)出來的 loader 定制選項(xiàng)，你不得不在 Vue Loader 自己的 loaders 選項(xiàng)中將它重復(fù)一遍。在 v15 中你再也沒有必要這么做了。
拿官方腳手架來說, 可以看到兩個(gè)函數(shù)，用來生成 vue-loader 的 options 還有 module.rule, 我把他們摘出來，就可以看出來了。

// util.js
exports.cssLoaders = function (options) {
   // ...
}

// Generate loaders for standalone style files (outside of .vue)
exports.styleLoaders = function (options) {
  // ...
}

// vue-loader-conf.js
module.exports = {
  loaders: utils.cssLoaders({
    sourceMap: sourceMapEnabled,
    extract: isProduction
  }),
  ...
}

// webpack.dev.config
const devWebpackConfig = merge(baseWebpackConfig, {
  module: {
    rules: utils.styleLoaders({ sourceMap: config.dev.cssSourceMap, usePostCSS: true })
  },
  ...
}

我剛?cè)肽_手架的坑的時(shí)候都蒙了，為什么要這樣寫，為了德瑪西亞么？當(dāng)然不是，是因?yàn)樘?vue-loader v14 的坑
vue-loader v15版本只要寫一遍就好了，但是要注意請(qǐng)確保在你的 webpack 配置中添加 Vue Loader 的插件

// webpack.config.js
const VueLoaderPlugin = require("vue-loader/lib/plugin")

module.exports = {
  module: {
    rules: [
      {
        test: /.vue$/,
        loader: "vue-loader"
      },
      // ...
    ]
  },
  plugins: [
    // 請(qǐng)確保引入這個(gè)插件！
    new VueLoaderPlugin()
  ]
}

然后由于生產(chǎn)和測(cè)試環(huán)境對(duì) css 文件處理不同。在webpack.dev.config.js和webpack.prod.config.js里分別配置 less/scss css 的loader就好了:

{
  module: {
    rules: [
      // ...
      {
        test: /.less$/,
        use: [
          "vue-style-loader",
          "css-loader",
          "less-loader"
        ]
      }
    ]
  }
}

mini-css-extract-plugin css 抽取

webpack v4 官方不在推薦使用 extract-text-webpack-plugin 了，改換 mini-css-extract-plugin

// webpack4
npm install -D mini-css-extract-plugin

// webpack.config.js
var MiniCssExtractPlugin = require("mini-css-extract-plugin")

module.exports = {
  // 其它選項(xiàng)...
  module: {
    rules: [
      // ... 忽略其它規(guī)則
      {
        test: /.css$/,
        use: [
          process.env.NODE_ENV !== "production"
            ? "vue-style-loader"
            : MiniCssExtractPlugin.loader,
          "css-loader"
        ]
      }
    ]
  },
  plugins: [
    // ... 忽略 vue-loader 插件
    new MiniCssExtractPlugin({
      filename: style.css
    })
  ]
}

// webpack3
npm install -D extract-text-webpack-plugin
// webpack.config.js
var ExtractTextPlugin = require("extract-text-webpack-plugin")
module.exports = {
  // 其它選項(xiàng)...
  module: {
    rules: [
      // ...其它規(guī)則忽略
      {
        test: /.css$/,
        loader: ExtractTextPlugin.extract({
          use: "css-loader",
          fallback: "vue-style-loader"
        })
      }
    ]
  },
  plugins: [
    // ...vue-loader 插件忽略
    new ExtractTextPlugin("style.css")
  ]
}

福利

對(duì)webpack3官方腳手架還不是很了解的同學(xué)可以看我根據(jù)自己理解寫的注釋，詳情點(diǎn)這里
覺得麻煩，不想自己搞？那也沒關(guān)系，我自己按照腳手架改了一套，感興趣的可以試試點(diǎn)這里
覺得不錯(cuò)請(qǐng)star哦，另外，我準(zhǔn)備在下一篇文章中將如何如優(yōu)化webpack，喜歡的話可關(guān)注

參考

webpack 文檔

webpack github release

Webpack 4 配置最佳實(shí)踐