webpack學習之路（七）

本節我們將深入了解一些應用於構建**和應用的最佳實踐和工具。

雖然我們對生產環境和開發環境做了略微區分，但是遵循不重複原則dry(don't repeat yourself)還是保留乙個通用配置。為了整合這些配置我們需要乙個webpack-merge外掛程式。有了通用配置我們就不用在特定環境的配置中重複**了。

安裝webpack-merge外掛程式並把之前成型了的**分離：

npm install --s**e-dev webpack-merge

project

webpack-demo
|-package.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 cleanwebpackplugin = require('clean-webpack-plugin');
+ const htmlwebpackplugin = require('html-webpack-plugin');
++ module.exports =,
+plugins: [
+ new cleanwebpackplugin(['dist']),
+ new
htmlwebpackplugin()
+],+output: 
+ };

webpack.dev.js

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

webpack.prod.js

+ const merge = require('webpack-merge');
+ const common = require('./webpack.common.js');
++ module.exports =merge(common, );

現在根據新的配置修改一下啟動指令碼。我們將使用npm start作為開發環境指令碼，npm run build作為生產環境指令碼。

package.json

"keywords": ,

"author": "",

"license": "isc",

"devdependencies":

}

許多引用庫會根據process.env.node_env來決定包含什麼。在非生產模式下許多庫會新增一些額外的日誌和測試來使除錯更加簡單。而在process.env.node_env==="production"時它們可能會刪除或加入一部分重要的**來提高真實使用者執行你的**時的效能。webpack v4及以後明確mode屬性會自動幫你配置defineplugin外掛程式：

webpack.prod.js

const merge = require('webpack-merge');
const common = require('./webpack.common.js');
module.exports =merge(common, );

ps:技術上講，node_env是乙個由 node.js 暴露給執行指令碼的系統環境變數。通常用於決定在開發環境與生產環境(dev-vs-prod)下，伺服器工具、構建指令碼和客戶端 library 的行為。然而，與預期不同的是，無法在構建指令碼webpack.config.js中，將process.env.node_env設定為"production"。因此，例如process.env.node_env === 'production' ? '[name].[hash].bundle.js' : '[name].bundle.js'這樣的條件語句，在 webpack 配置檔案中，無法按照預期執行。

如果你使用了像react這樣的庫，那你新增完這個外掛程式後應該能發現輸出包的大小減小了非常多。而且本地src資料夾下的檔案都會識別這個變數，所以以下檢查會有效：

src/index.js

import  from './math.js';
++ if (process.env.node_env !== 'production') 
function
component()

如果決定嘗試以上這些，只要確保新外掛程式也會按照tree shaking指南中所陳述的，具有刪除未引用**(dead code)的能力足矣。

我們鼓勵你在生產環境中啟用 source map，因為它們對除錯原始碼(debug)和執行基準測試(benchmark tests)很有幫助。也就是說，你應該選擇乙個針對生產環境的構建速度較快的配置。對於本指南，我們將在生產環境中使用source-map選項，而不是我們在開發環境中用到的inline-source-map：

webpack.prod.js

const merge = require('webpack-merge');
const common = require('./webpack.common.js');
module.exports =merge(common, );

ps:避免在生產中使用inline-***和eval-***，因為它們可以增加 bundle 大小，並降低整體效能。

正如在管理資源中最後的載入css小節中所提到的，通常最好的做法是使用extracttextplugin將 css 分離成單獨的檔案。在外掛程式文件中有一些很好的實現例子。disable選項可以和--env標記結合使用，以允許在開發中進行內聯載入，推薦用於熱模組替換和構建速度。

以上描述也可以通過命令列實現。例如，--optimize-minimize標記將在後台引用uglifyjsplugin。和以上描述的defineplugin例項相同，--define process.env.node_env="'production'"也會做同樣的事情。並且，webpack -p將自動地呼叫上述這些標記，從而呼叫需要引入的外掛程式。

這些簡便方式雖然都很不錯，但是我們通常建議只使用配置方式，因為在這兩種場景中下，配置方式能夠更好地幫助你了解自己正在做的事情。配置方式還可以讓你更方便地控制這兩個外掛程式中的其他選項。

webpack學習之路（七）

webpack學習之路之webpack核心概念

webpack學習之路（五）

webpack學習之路（三）

webpack學習之路（七）

webpack學習之路之webpack核心概念

webpack學習之路（五）

webpack學習之路（三）

相關推薦