webpack最基本的配置就是導出一個靜態的對象，但是由于我們業務比較復雜，往往需要動態配置webpack以構建目標代碼。
幸運的是，webpack為我們提供了動態配置webpack文件的支持。
下面介紹一下webpack的多種配置類型。
1、導出為一個對象（Object）
webpack最常見的配置類型為導出一個對象，即
const path = require('path')module.exports = { entry: './src/index.js', output: { filename: 'bundle.js', path: path.resolve(__dirname, 'dist') }}2、導出為一個函數（Function）
很明顯，導出為一個對象缺乏靈活性。若我們想要根據不同的開發環境構建不一樣的代碼。此時，webpack配置也應該隨著改變。
所以，webpack支持我們導出一個函數，這個導出函數的默認參數為env和argv。其中，env為環境對象，我們可以通過命令行對其進行配置（webpack可自動讀取該配置），argv為命令行輸入參數的map。
（1）--env 參數支持各種各樣的配置：
| Invocation | Resulting environment | notes |
|---|---|---|
| webpack --env prod | "prod" | env為String類型，賦值為prod |
| webpack --env.prod | { prod: true } | env為對象，prod是對象的屬性， 默認為true |
| webpack --env.prod=1 | { prod: 1 } | env為對象，prod是對象的屬性，賦值為1 |
| webpack --env.prod=foo | { prod: "foo" } | env為對象，prod是對象的屬性，賦值為foo |
| webpack --env.prod --env.min | [ prod: true, min: true ] | env為對象，prod和min是對象的屬性，默認為true。--env命令可以多次使用，不會被覆蓋 |
| webpack --env.prod --env min | [{ prod: true }, "min"] | env 為數組，第一個數組元素為對象，prod是其屬性，默認為true。第二個數組元素為String，賦值為min |
| webpack --env.prod=foo --env.prod=bar | { prod: ["foo", "bar"] } | env為對象，prod是對象的屬性。prod是一個數組，第一個數組元素為"foo",第二個數組對象為"bar"。注意，即使這種情況下，prod值不會被覆蓋，而是轉化為數組。 |
（2）argv為webpack命令行參數的map。
例如，我們在命令行鍵入webpack --entry-filename=index,則在webpack配置文件中，我們可以通過argv["entry-filename"]來獲取命令行配置的值。即：
argv["entry-filename"] === "index"
（3）舉個例子：
const path = require('path')module.exports = function (env, argv) { return { entry: './src/' + argv['entry-filename'] + '.js', output: { filename: 'bundle.js', path: path.resolve(__dirname, 'dist'), }, devtool: env.prod ? 'source-map' : 'eval' }}
新聞熱點
疑難解答
圖片精選
