Webpack 配置(Configuration)

你可能已經(jīng)注意到，很少有 webpack 配置看起來完全相同。這是因為 webpack 的配置文件是 JavaScript 文件，文件內(nèi)導出了一個 webpack 配置的對象。 webpack 會根據(jù)該配置定義的屬性進行處理。

由于 webpack 遵循 CommonJS 模塊規(guī)范，因此，你可以在配置中使用：

• 通過 ?require(...)? 引入其他文件
• 通過 ?require(...)? 使用 npm 下載的工具函數(shù)
• 使用 JavaScript 控制流表達式，例如 ??:? 操作符
• 對 value 使用常量或變量賦值
• 編寫并執(zhí)行函數(shù)，生成部分配置

請在合適的場景，使用這些功能。

雖然技術(shù)上可行，但還是應(yīng)避免如下操作：

• 當使用 webpack CLI 工具時，訪問 CLI 參數(shù)（應(yīng)編寫自己的 CLI 工具替代，或者使用 ?--env?）
• 導出不確定的結(jié)果（兩次調(diào)用 webpack 應(yīng)產(chǎn)生相同的輸出文件）
• 編寫超長的配置（應(yīng)將配置文件拆分成多個）

接下來的示例中，展示了 webpack 配置如何實現(xiàn)既可表達，又可靈活配置，這主要得益于 配置即為代碼：

基本配置

webpack.config.js

const path = require('path');

module.exports = {
  mode: 'development',
  entry: './foo.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'foo.bundle.js',
  },
};

查看：配置章節(jié)中所有支持的配置選項。

多個 target

除了可以將單個配置導出為 object，function 或 Promise 以外，還可以將其導出為多個配置。

查看：導出多個配置

使用其它配置語言

Webpack 支持由多種編程和數(shù)據(jù)語言編寫的配置文件。

查看：配置語言