Webpack 生產(chǎn)環(huán)境

在本指南中，我們將深入一些最佳實踐和工具，將站點或應(yīng)用程序構(gòu)建到生產(chǎn)環(huán)境中。

配置

development(開發(fā)環(huán)境) 和 production(生產(chǎn)環(huán)境) 這兩個環(huán)境下的構(gòu)建目標(biāo)存在著巨大差異。在開發(fā)環(huán)境中，我們需要：強(qiáng)大的 source map 和一個有著 live reloading(實時重新加載) 或 hot module replacement(熱模塊替換) 能力的 localhost server。而生產(chǎn)環(huán)境目標(biāo)則轉(zhuǎn)移至其他方面，關(guān)注點在于壓縮 bundle、更輕量的 source map、資源優(yōu)化等，通過這些優(yōu)化方式改善加載時間。由于要遵循邏輯分離，我們通常建議為每個環(huán)境編寫彼此獨立的 webpack 配置。

雖然，以上我們將 生產(chǎn)環(huán)境 和 開發(fā)環(huán)境 做了細(xì)微區(qū)分，但是，請注意，我們還是會遵循不重復(fù)原則(Don't repeat yourself - DRY)，保留一個 "common(通用)" 配置。為了將這些配置合并在一起，我們將使用一個名為 webpack-merge 的工具。此工具會引用 "common" 配置，因此我們不必再在環(huán)境特定(environment-specific)的配置中編寫重復(fù)代碼。

我們先從安裝 webpack-merge 開始，并將之前指南中已經(jīng)成型的那些代碼進(jìn)行分離：

npm install --save-dev webpack-merge

project

  webpack-demo
  |- package.json
  |- package-lock.json
- |- webpack.config.js
+ |- webpack.common.js
+ |- webpack.dev.js
+ |- webpack.prod.js
  |- /dist
  |- /src
    |- index.js
    |- math.js
  |- /node_modules

webpack.common.js

+ const path = require('path');
+ const HtmlWebpackPlugin = require('html-webpack-plugin');
+
+ module.exports = {
+   entry: {
+     app: './src/index.js',
+   },
+   plugins: [
+     new HtmlWebpackPlugin({
+       title: 'Production',
+     }),
+   ],
+   output: {
+     filename: '[name].bundle.js',
+     path: path.resolve(__dirname, 'dist'),
+     clean: true,
+   },
+ };

webpack.dev.js

+ const { merge } = require('webpack-merge');
+ const common = require('./webpack.common.js');
+
+ module.exports = merge(common, {
+   mode: 'development',
+   devtool: 'inline-source-map',
+   devServer: {
+     static: './dist',
+   },
+ });

webpack.prod.js

+ const { merge } = require('webpack-merge');
+ const common = require('./webpack.common.js');
+
+ module.exports = merge(common, {
+   mode: 'production',
+ });

現(xiàn)在，在 webpack.common.js 中，我們設(shè)置了 entry 和 output 配置，并且在其中引入這兩個環(huán)境公用的全部插件。在 webpack.dev.js 中，我們將 mode 設(shè)置為 development，并且為此環(huán)境添加了推薦的 devtool（強(qiáng)大的 source map）和 devServer 配置。最后，在 webpack.prod.js 中，我們將 mode 設(shè)置為 production，其中會引入之前在 tree shaking 指南中介紹過的 TerserPlugin。

注意，在環(huán)境特定的配置中使用 merge() 功能，可以很方便地引用 ?webpack.dev.js? 和 ?webpack.prod.js? 中公用的 common 配置。webpack-merge 工具提供了各種 merge(合并) 高級功能，但是在我們的用例中，無需用到這些功能。

NPM Scripts

現(xiàn)在，我們把 scripts 重新指向到新配置。讓 npm start script 中 webpack-dev-server, 使用 ?webpack.dev.js?, 而讓 npm run build script 使用 ?webpack.prod.js?:

package.json

  {
    "name": "development",
    "version": "1.0.0",
    "description": "",
    "main": "src/index.js",
    "scripts": {
-     "start": "webpack serve --open",
+     "start": "webpack serve --open --config webpack.dev.js",
-     "build": "webpack"
+     "build": "webpack --config webpack.prod.js"
    },
    "keywords": [],
    "author": "",
    "license": "ISC",
    "devDependencies": {
      "css-loader": "^0.28.4",
      "csv-loader": "^2.1.1",
      "express": "^4.15.3",
      "file-loader": "^0.11.2",
      "html-webpack-plugin": "^2.29.0",
      "style-loader": "^0.18.2",
      "webpack": "^4.30.0",
      "webpack-dev-middleware": "^1.12.0",
      "webpack-dev-server": "^2.9.1",
      "webpack-merge": "^4.1.0",
      "xml-loader": "^1.2.1"
    }
  }

隨便運行下這些腳本，然后查看輸出結(jié)果的變化，然后我們會繼續(xù)添加一些 生產(chǎn)環(huán)境 配置。

指定 mode

許多 library 通過與 process.env.NODE_ENV 環(huán)境變量關(guān)聯(lián)，以決定 library 中應(yīng)該引用哪些內(nèi)容。例如，當(dāng)process.env.NODE_ENV 沒有被設(shè)置為 'production' 時，某些 library 為了使調(diào)試變得容易，可能會添加額外的 log(日志記錄) 和 test(測試) 功能。并且，在使用 process.env.NODE_ENV === 'production' 時，一些 library 可能針對具體用戶的環(huán)境，刪除或添加一些重要代碼，以進(jìn)行代碼執(zhí)行方面的優(yōu)化。從 webpack v4 開始, 指定 mode 會自動地配置 DefinePlugin：

webpack.prod.js

  const { merge } = require('webpack-merge');
  const common = require('./webpack.common.js');

  module.exports = merge(common, {
    mode: 'production',
  });

如果你正在使用像 react 這樣的 library，那么在添加此 DefinePlugin 插件后，你應(yīng)該看到 bundle 大小顯著下降。還要注意，任何位于 /src 的本地代碼都可以關(guān)聯(lián)到 process.env.NODE_ENV 環(huán)境變量，所以以下檢查也是有效的：

src/index.js

  import { cube } from './math.js';
+
+ if (process.env.NODE_ENV !== 'production') {
+   console.log('Looks like we are in development mode!');
+ }

  function component() {
    const element = document.createElement('pre');

    element.innerHTML = [
      'Hello webpack!',
      '5 cubed is equal to ' + cube(5)
    ].join('\n\n');

    return element;
  }

  document.body.appendChild(component());

壓縮(Minification)

在生產(chǎn)模式下，Webpack v4+將默認(rèn)壓縮您的代碼。

注意，雖然生產(chǎn)環(huán)境下默認(rèn)使用 TerserPlugin ，并且也是代碼壓縮方面比較好的選擇，但是還有一些其他可選擇項。以下有幾個同樣很受歡迎的插件：

• ClosureWebpackPlugin

如果決定嘗試一些其他壓縮插件，確保新插件也會按照 tree shake 指南中所陳述的具有刪除未引用代碼(dead code)的能力，并將它作為 optimization.minimizer。

源碼映射(Source Mapping)

我們鼓勵你在生產(chǎn)環(huán)境中啟用 source map，因為它們對 debug(調(diào)試源碼) 和運行 benchmark tests(基準(zhǔn)測試) 很有幫助。雖然有著如此強(qiáng)大的功能，然而還是應(yīng)該針對生產(chǎn)環(huán)境用途，選擇一個可以快速構(gòu)建的推薦配置（更多選項請查看 devtool）。對于本指南，我們將在 生產(chǎn)環(huán)境 中使用 source-map 選項，而不是我們在 開發(fā)環(huán)境 中用到的 inline-source-map：

webpack.prod.js

  const { merge } = require('webpack-merge');
  const common = require('./webpack.common.js');

  module.exports = merge(common, {
    mode: 'production',
+   devtool: 'source-map',
  });

壓縮 CSS

將生產(chǎn)環(huán)境下的 CSS 進(jìn)行壓縮會非常重要，請查看 在生產(chǎn)環(huán)境下壓縮 章節(jié)。

CLI 替代選項

上述許多選項都可以通過命令行參數(shù)進(jìn)行設(shè)置。例如， ?optimize-minimize? 可以使用 ?--optimization-minimize? 進(jìn)行設(shè)置，mode 可以使用 ?--mode? 進(jìn)行設(shè)置。運行 ?npx webpack --help=verbose? 可以查看所有關(guān)于 CLI 的可用參數(shù)。

雖然這種簡寫方式很有用處，但我們還是建議通過 webpack 配置文件的方式進(jìn)行使用，這樣可以提高可配置能力。