【webpack4】不同的匯出型別
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'
}
}
在命令列中，我們需要自鍵入
webpack --env.prod --entry-filename=index
注意，凡是webpack配置檔案中使用到的命令列引數，例如argv["entry-filename"]，均需要在命令列傳入，一個不能遺漏，否則webpack會報錯：Config did not export an object
3、匯出為一個Promise物件
除了匯出為一個函式，webpack還支援我們非同步獲取配置變數來配置相關檔案。（真是很強大！）
為了體現非同步獲取資料的過程，我們把webpack.config.js修改為以下內容：
const path = require('path')
module.exports = () => {
return new Promise((resolve, reject) => {
setTimeout(() => {
resolve({
entry: './src/index.js',
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist')
}
})
}, 1000)
})
}
4、匯出多個配置
修改webpack.config.js的內容如下：
const path = require('path')
module.exports = [
{
name: 'index',
entry: './src/index.js',
output: {
filename: 'index.js',
path: path.resolve(__dirname, 'dist')
},
mode: 'production'
},
{
name: 'main',
entry: './src/main.js',
output: {
filename: 'main.js',
path: path.resolve(__dirname, 'dist')
}
}
]
當我們執行webpack時，以上多個配置都會被構建出來。如果我們只想構建其中一份程式碼，那麼只需要傳入--config-name引數即可：
webpack --config-name=index
webpack --config-name=main
如上所示，我們可以分別構建出name為index、name為main的配置物件所配置的內容。
以上配置常見的場景有：npm包利用不同的模組語法構建不同的輸出檔案，供不同的專案進行使用：
module.exports = [{
output: {
filename: './dist-amd.js',
libraryTarget: 'amd'
},
name: 'amd',
entry: './app.js',
mode: 'production',
},{
output: {
filename: './dist-commonjs.js',
libraryTarget: 'commonjs'
},
name: 'commonjs',
entry: './app.js',
mode: 'production',
}]
總而言之，webpack為我們提供了眾多靈活的配置解決方案。當我們遇到複雜專案的時候，只要明確心中需求，大多數都能夠找到對應的解決方案。