Webpack 配置(Configuration)

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

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

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

請(qǐng)?jiān)诤线m的場(chǎng)景，使用這些功能。

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

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

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

基本配置

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é)中所有支持的配置選項(xiàng)。

多個(gè) target

除了可以將單個(gè)配置導(dǎo)出為 object，function 或 Promise 以外，還可以將其導(dǎo)出為多個(gè)配置。

查看：導(dǎo)出多個(gè)配置

使用其它配置語言

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

查看：配置語言