命令列介面

為了正確使用和更輕鬆地分發此組態，可以使用 webpack.config.js 組態 webpack。傳送至 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

Configtest

驗證 webpack 組態。

npx webpack configtest [config-path]

範例

npx webpack configtest ./webpack.config.js

設定檔路徑

Webpack 設定檔的路徑。預設為 ./webpack.config.js。

Serve

執行 webpack dev 伺服器。

npx webpack serve [options]

範例

npx webpack serve --static --open

Watch

執行 webpack 並監控檔案變更。

npx webpack watch [options]

範例

npx webpack watch --mode development

旗標

預設 webpack 附帶下列旗標

否定標記

核心旗標

從 CLI v4 和 webpack v5 開始，CLI 從 webpack 核心匯入整個設定檔架構，以便從命令列調整幾乎每個設定檔選項。

以下是 webpack v5 支援的所有核心旗標清單，以及 CLI v4 - 連結

例如，如果您想在專案中啟用效能提示，您會在設定檔中使用 這個 選項，使用核心旗標，您可以執行 -

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

entry

一個檔案名稱或一組命名檔案名稱，作為建置專案的進入點。您可以傳遞多個進入點（每個進入點在啟動時載入）。以下是透過 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

要儲存已套件檔案的路徑。它會對應到設定檔選項 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

config

使用組態檔建置來源

指定與預設值之一的 webpack.config.js 不同的 組態 檔。

npx webpack --config example.config.js

config-name

如果您的組態檔匯出多個組態，您可以使用 --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 來合併兩個或更多不同的 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 之外，在 env 下還有內建的變數，可以在您的 webpack 組態中使用

請注意，您無法在已套件的程式碼中存取這些內建環境變數。

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

進度

您可以使用 --progress 旗標來查看任何 webpack 編譯的進度。

npx webpack --progress

若要收集進度步驟的剖析資料，您可以將 profile 作為值傳遞給 --progress 旗標。

npx webpack --progress=profile

傳遞 CLI 引數給 Node.js

若要直接傳遞引數給 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() 方法在未啟用 載入器掛鉤 的情況下無法與 ts-node 搭配使用（詳述於 TypeStrong/ts-node#1007）。

若要修正上述錯誤，請使用下列指令

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

如需更多資訊，請參閱我們的文件，了解如何使用 TypeScript 編寫 webpack 組態。