vue cli中修改 webpack 配置的方法

調整 webpack 配置最簡單的方式就是在 vue.config.js 中的 configurewebpack 選項提供乙個物件：

// vue.config.js
module.exports = 
}

該物件將會被 webpack-merge 合併入最終的 webpack 配置。

如果你需要基於環境有條件地配置行為，或者想要直接修改配置，那就換成乙個函式 (該函式會在環境變數被設定之後懶執行)。該方法的第乙個引數會收到已經解析好的配置。在函式內，你可以直接修改配置，或者返回乙個將會被合併的物件：

// vue.config.js
module.exports =  else 
}}

vue cli 內部的 webpack 配置是通過 webpack-chain 維護的。這個庫提供了乙個 webpack 原始配置的上層抽象，使其可以定義具名的 loader 規則和具名外掛程式，並有機會在後期進入這些規則並對它們的選項進行修改。

它允許我們更細粒度的控制其內部配置。接下來有一些常見的在 vue.config.js 中的 chainwebpack 修改的例子。

修改 loader 選項

// vue.config.js
module.exports = )
}}

新增乙個新的 loader

// vue.config.js
module.exports = 
}

替換乙個規則裡的 loader

// vue.config.js
module.exports = 
}

修改外掛程式選項

// vue.config.js
module.exports = )
}}

你需要熟悉 webpack-chain 的 api 並閱讀一些原始碼以便了解如何最大程度利用好這個選項，但是比起直接修改 webpack 配置，它的表達能力更強，也更為安全。

除了上述使用 chainwebpack 來改變 webpack 內部配置外，我們還可以使用 configurewebpack 來進行修改，兩者的不同點在於 chainwebpack 是鏈式修改，而 configurewebpack 更傾向於整體替換和修改。示例**如下：

// vue.config.js
module.exports = 
}...
}

configurewebpack 可以直接是乙個物件，也可以是乙個函式，如果是物件它會直接使用 webpack-merge 對其進行合併處理，如果是函式，你可以直接使用其 config 引數來修改 webpack 中的配置，或者返回乙個物件來進行 merge 處理。

vue-cli3 已經有的優化

首先，通過官方文件中的配置參考可以了解到一部分預設配置。通過vue-inspect命令，可以檢視預設的webpack配置。例如babel-loader，已經配置了exclude，並且開啟了cachedirecorty，那麼不用考慮優化loader了。

其次，從vue-cli官方文件中，注意到parallel這個配置有如下說明。

是否為 babel 或 typescript 使用 thread-loader。該選項在系統的 cpu 有多於乙個核心時自動啟用，僅作用於生產構建。

此外，webpack4中，mode為production時會自動開啟**壓縮和tree shaking。