設定

webpack構成が全く同じに見えるものが少ないことに気づいたかもしれません。これは、**webpackの構成ファイルは、webpackの構成をエクスポートするJavaScriptファイルであるためです。** この構成は、定義されたプロパティに基づいてwebpackによって処理されます。

標準のNode.js CommonJSモジュールであるため、**次のことが可能** です

• require(...)経由で他のファイルをインポートする
• require(...)経由でnpm上のユーティリティを使用する
• JavaScript制御フロー式を使用する。例：?:演算子
• 頻繁に使用される値に定数または変数を使用する
• 構成の一部を生成する関数を記述して実行する

これらの機能は、適切な場合に使用してください。

技術的には可能ですが、**次のプラクティスは避ける必要があります**

• webpack CLIを使用しているときにCLI引数にアクセスする（代わりに独自のCLIを記述するか、--envを使用する）
• 非決定的な値をエクスポートする（webpackを2回呼び出すと、同じ出力ファイルが生成されるはずです）
• 長い構成を記述する（代わりに構成を複数のファイルに分割します）

以下の例は、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は、複数のプログラミングおよびデータ言語で記述された構成ファイルを受け入れます。

参照：構成言語