コマンドラインインターフェース

この設定を適切に使用し、より簡単に配布するために、webpackはwebpack.config.jsで設定できます。CLIに送信されるすべてのパラメータは、設定ファイル内の対応するパラメータにマップされます。

まだwebpackとCLIをインストールしていない場合は、インストールガイドをお読みください。

コマンド

webpack-cliは、webpackの操作を簡単にするためのさまざまなコマンドを提供します。デフォルトでは、webpackには以下が同梱されています。

ビルド

webpackを実行します（デフォルトコマンド、省略可能）。

npx webpack build [options]

例

npx webpack build --config ./webpack.config.js --stats verbose

初期化

新しいwebpackプロジェクトを初期化するために使用されます。

npx webpack init [generation-path] [options]

例

npx webpack init ./my-app --force --template=default

生成パス

設定を生成する場所。デフォルトはprocess.cwd()です。

オプション

-t、--template

文字列 = 'default'

生成するテンプレートの名前。

-f、--force

ブール値

質問なしでプロジェクトを生成します。有効にすると、各質問のデフォルトの回答が使用されます。

ローダー

ローダーをスキャフォールディングします。

npx webpack loader [output-path] [options]

例

npx webpack loader ./my-loader --template=default

出力パス

出力ディレクトリへのパス（例：./loader-name）。

オプション

-t、--template

文字列 = 'default'

テンプレートの種類。

プラグイン

プラグインをスキャフォールディングします。

npx webpack plugin [output-path] [options]

例

npx webpack plugin ./my-plugin --template=default

出力パス

出力ディレクトリへのパス（例：./plugin-name）。

オプション

-t、--template

文字列 = 'default'

テンプレートの種類。

情報

システムに関する情報を出力します。

npx webpack info [options]

例

npx webpack info --output json --addition-package postcss

情報に関するオプション

-a、--additional-package

文字列

出力に追加のパッケージを追加します。

例

npx webpack info --additional-package postcss

-o、--output

文字列: 'json' | 'markdown'

指定された形式で出力を取得します。

例

npx webpack info --output markdown

設定テスト

webpack設定を検証します。

npx webpack configtest [config-path]

例

npx webpack configtest ./webpack.config.js

設定パス

webpack設定ファイルへのパス。デフォルトは./webpack.config.jsです。

サーバー

webpack開発サーバーを実行します。

npx webpack serve [options]

例

npx webpack serve --static --open

監視

webpackを実行し、ファイルの変更を監視します。

npx webpack watch [options]

例

npx webpack watch --mode development

フラグ

デフォルトでは、webpackには次のフラグが同梱されています。

否定フラグ

コアフラグ

CLI v4およびwebpack v5以降、CLIはwebpackコアから設定スキーマ全体をインポートして、コマンドラインからほぼすべての設定オプションを調整できるようにします。

CLI v4でwebpack v5がサポートするすべてのコアフラグのリストはこちらです - リンク

たとえば、プロジェクトでパフォーマンスヒントを有効にする場合は、設定でこのオプションを使用します。コアフラグを使用すると、次のようにできます。

npx webpack --performance-hints warning

使用法

設定ファイルを使用する場合

npx webpack [--config webpack.config.js]

設定ファイルでのオプションについては、設定を参照してください。

設定ファイルを使用しない場合

npx webpack --entry <entry> --output-path <output-path>

例

npx webpack --entry ./first.js --entry ./second.js --output-path /build

エントリ

プロジェクトをビルドするためのエントリポイントとして機能するファイル名または名前付きファイル名のセット。複数のエントリを渡すことができます（すべてのエントリは起動時にロードされます）。以下は、CLIを介してエントリファイルを指定する複数の方法です -

npx webpack --entry-reset ./first-entry.js

npx webpack --entry-reset --entry ./first-entry.js

npx webpack --entry-reset ./first-entry.js ./other-entry.js

npx webpack --entry-reset --entry ./first-entry.js ./other-entry.js

出力パス

バンドルされたファイルを保存するパス。設定オプションoutput.pathにマップされます。

例

プロジェクト構造が次のようになっている場合 -

.
├── dist
├── index.html
└── src
    ├── index.js
    ├── index2.js
    └── others.js

npx webpack ./src/index.js --output-path dist

これにより、エントリがindex.jsとしてソースコードがバンドルされ、出力バンドルファイルのパスはdistになります。

asset main.js 142 bytes [compared for emit] [minimized] (name: main)
./src/index.js 30 bytes [built] [code generated]
./src/others.js 1 bytes [built] [code generated]
webpack 5.1.0 compiled successfully in 187 ms

npx webpack ./src/index.js ./src/others2.js --output-path dist/

これにより、両方のファイルを個別のエントリポイントとしてバンドルが形成されます。

asset main.js 142 bytes [compared for emit] [minimized] (name: main)
./src/index.js 30 bytes [built] [code generated]
./src/others2.js 1 bytes [built] [code generated]
./src/others.js 1 bytes [built] [code generated]
webpack 5.1.0 compiled successfully in 198 ms

デフォルト設定

CLIは、プロジェクトのパスにあるいくつかのデフォルト設定を探します。以下は、CLIによって選択される設定ファイルです。

これは、優先順位が昇順の検索です

例 - 設定ファイルの検索は、.webpack/webpackfile > .webpack/webpack.config.js > webpack.config.jsの順になります

'webpack.config',
'.webpack/webpack.config',
'.webpack/webpackfile',

共通オプション

ヘルプ

cliで利用可能な基本的なコマンドとフラグをリストします

webpack help [command] [option]とwebpack [command] --helpの両方がヘルプを取得するために有効です

npx webpack --help

# or

npx webpack help

cliでサポートされているすべてのコマンドとフラグをリストします

npx webpack --help=verbose

特定のコマンドまたはオプションのヘルプを表示します

npx webpack help --mode

バージョン

インストールされているパッケージとサブパッケージのバージョンを表示します

使用しているwebpackとwebpack-cliのバージョンを確認するには、次のコマンドを実行します

npx webpack --version

# or

npx webpack version

これにより、次の結果が出力されます

webpack 5.31.2
webpack-cli 4.6.0

webpack-dev-serverがインストールされている場合は、そのバージョンも出力されます

webpack 5.31.2
webpack-cli 4.6.0
webpack-dev-server 3.11.2

webpack-cliサブパッケージ（@webpack-cli/infoなど）のバージョンを確認するには、次のようなコマンドを実行します

npx webpack info --version

これにより、次の結果が出力されます

@webpack-cli/info 1.2.3
webpack 5.31.2
webpack-cli 4.6.0
webpack-dev-server 3.11.2

設定

設定ファイルを使用してソースをビルドします

デフォルトの1つであるwebpack.config.js以外の別の設定ファイルを指定します。

npx webpack --config example.config.js

設定名

設定ファイルが複数の設定をエクスポートする場合は、--config-nameを使用して実行する設定を指定できます。

次のwebpack.config.jsを検討してください

module.exports = [
  {
    output: {
      filename: './dist-first.js',
    },
    name: 'first',
    entry: './src/first.js',
    mode: 'development',
  },
  {
    output: {
      filename: './dist-second.js',
    },
    name: 'second',
    entry: './src/second.js',
    mode: 'development',
  },
  {
    output: {
      filename: './dist-third.js',
    },
    name: 'third',
    entry: './src/third.js',
    mode: 'none',
    stats: 'verbose',
  },
];

second 設定のみを実行する場合

npx webpack --config-name second

複数の値を渡すこともできます

npx webpack --config-name first --config-name second

merge

--merge を使用して、2 つ以上の異なる webpack 設定をマージできます。

npx webpack --config ./first.js --config ./second.js --merge

extends

--extends を使用して、既存の webpack 設定を拡張できます。

npx webpack --extends ./base.webpack.config.js

json

webpack の結果を JSON で出力

npx webpack --json

統計情報を JSON として保存したい場合は、以下を使用できます -

npx webpack --json stats.json

それ以外の場合、webpack はバンドル、チャンク、およびタイミングの詳細を示す一連の統計情報を出力します。このオプションを使用すると、出力は JSON オブジェクトになります。このレスポンスは、webpack の 分析ツール、または chrisbateman の webpack-visualizer、または th0r の webpack-bundle-analyzer で受け入れられます。分析ツールは JSON を取り込み、ビルドのすべての詳細をグラフィカル形式で提供します。

環境オプション

webpack 設定が 関数をエクスポートする場合、「環境」を渡すことができます。

env

npx webpack --env production    # env.production = true

--env 引数は複数の値を受け付けます

上記で示したカスタマイズされた env に加えて、webpack 設定内で使用される env の下にいくつかの組み込みのものがあります。

これらの組み込み環境変数は、バンドルされたコード内ではアクセスできないことに注意してください。

module.exports = (env, argv) => {
  return {
    mode: env.WEBPACK_SERVE ? 'development' : 'production',
  };
};

node-env

--node-env オプションを使用して process.env.NODE_ENV を設定できます。これはユーザーコードと webpack 設定の両方で利用できます。

npx webpack --node-env production   # process.env.NODE_ENV = 'production'

define-process-env-node-env

webpack-cli v5+ の場合。

--node-env のエイリアスで、process.env.NODE_ENV を設定します。

npx webpack --define-process-env-node-env production   # process.env.NODE_ENV = 'production'

設定オプション

バンドルの分析

webpack-bundle-analyzer を使用して、webpack によって出力された出力バンドルを分析することもできます。--analyze フラグを使用して、CLI 経由で呼び出すことができます。

npx webpack --analyze

進捗

webpack コンパイルの進捗状況を確認するには、--progress フラグを使用できます。

npx webpack --progress

進捗ステップのプロファイルデータを収集するには、--progress フラグの値として profile を渡すことができます。

npx webpack --progress=profile

Node.js に CLI 引数を渡す

引数を Node.js プロセスに直接渡すには、NODE_OPTIONS オプションを使用できます。

たとえば、Node.js プロセスのメモリ制限を 4 GB に増やす場合

NODE_OPTIONS="--max-old-space-size=4096" webpack

また、複数のオプションを Node.js プロセスに渡すことができます

NODE_OPTIONS="--max-old-space-size=4096 -r /path/to/preload/file.js" webpack

終了コードとその意味

CLI 環境変数

WEBPACK_CLI_FORCE_LOAD_ESM_CONFIG=true npx webpack --config ./webpack.config.esm

WEBPACK_PACKAGE

CLI でカスタム webpack バージョンを使用します。package.json に次の内容が含まれているとします。

{
  "webpack": "^4.0.0",
  "webpack-5": "npm:webpack@^5.32.0",
  "webpack-cli": "^4.5.0"
}

webpack v4.0.0 を使用する場合

npx webpack

webpack v5.32.0 を使用する場合

WEBPACK_PACKAGE=webpack-5 npx webpack

トラブルシューティング

TypeError [ERR_UNKNOWN_FILE_EXTENSION]: ./webpack.config.ts の不明なファイル拡張子 ".ts"

TypeScript でネイティブ ESM を使用する場合 (つまり、package.json で type: "module" を使用する場合) にこのエラーが発生する可能性があります。

webpack-cli は CommonJS と ESM の両方の形式で設定をサポートしており、最初に require() を使用して設定をロードしようとします。'ERR_REQUIRE_ESM' のエラーコード (このケースの特別なコード) で失敗すると、import() を使用して設定をロードしようとします。ただし、import() メソッドは、ローダーフックが有効になっていないと ( TypeStrong/ts-node#1007 で説明されているように) ts-node では動作しません。

上記のエラーを修正するには、次のコマンドを使用してください

NODE_OPTIONS="--loader ts-node/esm" npx webpack --entry ./src/index.js --mode production

詳細については、TypeScript での webpack 設定の作成に関するドキュメントを参照してください。