設定

你可能已經注意到，很少有 webpack 組態看起來完全一樣。這是因為 webpack 的組態檔案是一個 JavaScript 檔案，用來匯出 webpack 組態。 然後，webpack 會根據定義的屬性來處理這個組態。

由於它是一個標準的 Node.js CommonJS 模組，因此你可以執行下列動作

• 透過 require(...) 匯入其他檔案
• 透過 require(...) 使用 npm 上的工具程式
• 使用 JavaScript 控制流程表達式，例如 ?: 算子
• 使用常數或變數來表示經常使用的值
• 撰寫並執行函式來產生組態的一部分

在適當的時候使用這些功能。

雖然它們在技術上可行，但應該避免下列做法

• 使用 webpack CLI 時，存取 CLI 參數（改為撰寫你自己的 CLI，或 使用 --env）
• 匯出非確定性值（呼叫 webpack 兩次應該會產生相同的輸出檔案）
• 撰寫長組態（改為將組態拆分為多個檔案）

以下範例說明 webpack 的組態如何既能表達又能設定，因為它是程式碼

簡介組態

webpack.config.js

const path = require('path');

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

請參閱：組態區段，了解所有支援的組態選項

多個目標

除了將單一設定匯出為物件、函式 或 Promise 之外，你也可以匯出多個設定。

請參閱：匯出多個設定

使用其他設定語言

Webpack 接受以多種程式設計和資料語言撰寫的設定檔。

請參閱：設定語言