【自用】

为了更合适方便使用配置，可以在webpack.config.js中对webpack进行配置。CLI中传入的参数会在配置文件中映射为对应参数。

命令

webpack-cli提供了许多命令来简化webpack工作。默认情况下提供了以下命令

Build

用于输出文件

npx webpack build [options]
npx webpack build --config ./webpack.config.js --stats verbose

Init

用于初始化新的webpack项目。

npx webpack init [generation-path] [options]
npx webpack init ./my-app --force --template=default

生成路径默认为process.cwd()，--force/-f 为所有命令行选项使用默认值，--template/-t 为选择生成的模版。

Loader / Plugin

初始化一个loader，plugin。

npx webpack loader(plugin) [output-path] [options]
npx webpack loader(plugin) ./my-loader --template=default

output-path 为输出文件夹

Info

输出系统信息。

npx webpack info [options]
npx webpack info --output json --addition-package postcss

--additional-package/-a，在输出信息中添加额外的包，--output/-o 指定输出的格式

Configtest

校验webpack配置。

npx webpack configtest [config-path]
npx webpack configtest ./webpack.config.js

config-path 为你的webpack配置文件路径，默认./webpack.config.js。

Serve

运行webpack dev server。

npx webpack serve [options]
npx webpack serve --static --open

webpack serve相关配置和webpack-dev-server相关文档后续详解。

Watch

运行webpack并且监听文件变化。

npx webpack watch [options]
npx webpack watch --mode development

Flags

默认情况下有以下flag。

--v也能查看。

用法

使用配置文件

即使用webpack.config.js文件。

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

entry，构件项目时入口可以配置一个或多个文件名，可以传递多个入口。

npx webpack ./first-entry.js

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

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

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

output-path，构建后的文件路径。映射配置选项output.path。

默认配置

默认CLI会在项目路径中寻找，规则顺序如下。

.webpack/webpackfile > .webpack/webpack.config.js > webpack.config.js

通用配置

cli的参数优先级高于配置文件的参数。

help

列出基础命令和flag

npx webpack --help

# or

npx webpack help

列出所有cli支持的命令和flag

npx webpack --help=verbose

查看特定的命令和选项

npx webpack help --mode

version

显示已安装的package和子package的版本，查看webpack和webpack-cli的版本

npx webpack --version

# or

npx webpack version

如果安装了webpack-dev-server会一并输出。

如需要检查webpack-cli子包的版本。

npx webpack info --version

config

使用配置文件进行构建，默认为webpack.config.js，也可以指定其他的配置文件。

npx webpack --config example.config.js

config-name

如果配置文件导出了多个配置，可以使用--config-name来指定要运行的配置。

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',
  },
];

只想运行第二个配置项。

npx webpack --config-name second

也可以传递多个值。

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

merge

合并多个webpack配置。

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

json

以json格式输出webpack运行结果。

npx webpack --json

如果想把stats数据存储为json而非输出，可以使用。

npx webpack --json stats.json

这个输出的文件可以被一些analyse工具识别。例如webpack的analyze工具或webpack-visualizer等。

Environment选项

当webpack配置导出为函数时，会接受到一个environment的参数。

env

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

--env 参数可以接受多个值。

Invocation	Resulting environment
`npx webpack --env prod`	`{ prod: true }`
`npx webpack --env prod --env min`	`{ prod: true, min: true }`
`npx webpack --env platform=app --env production`	`{ platform: "app", production: true }`
`npx webpack --env foo=bar=app`	`{ foo: "bar=app"}`
`npx webpack --env app.platform="staging" --env app.name="test"`	`{ app: { platform: "staging", name: "test" }`

上面写法可以自定义env变量，webpack有一些内置变量。

变量名	描述
`WEBPACK_SERVE`	如果使用了 `serve	s`，则为` true`。
`WEBPACK_BUILD`	如果使用了 `build	bundle	b`，则为` true`。
`WEBPACK_WATCH`	如果使用了 `--watch	watch	w`，则为` true`。

但你并不能在代码中使用这些内置环境变量。

node-env

用来设置process.env.NODE_ENV。

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

如果不设置mode，process.env.NODE_ENV和mode都会被覆盖。

分析Bundle

可以使用webpack-bundle-analyzer插件来分析输出的bundle。也可以通过CLI的--analyze flag来调用它。

npx webpack --analyze

请确保项目中安装了webpack-bundle-analyzer。

Progress

查看webpack的编译进度。

npx webpack --progress

如需收集编译过程每一步的profile数据。

npx webpack --progress=profile

将CLI参数传递给Node.js

使用NODE_OPTIONS选项。

例如，将Node.js进程的内存限制增加到4G。

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

也可以传递多个选项。

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

退出代码及含义

退出代码	描述
`0`	成功
`1`	webpack Error
`2`	配置/选项问题，或者内部错误

CLI环境变量

环境变量	描述
`WEBPACK_CLI_SKIP_IMPORT_LOCAL`	设置为 `true` 时将不会使用 `webpack-cli` 本地实例。
`WEBPACK_CLI_FORCE_LOAD_ESM_CONFIG`	设置为 `true` 则强制加载 ESM 配置。
`WEBPACK_PACKAGE`	在 CLI 中使用自定义 webpack 版本。
`WEBPACK_DEV_SERVER_PACKAGE`	在 CLI 中使用自定义 webpack-dev-server 版本。
`WEBPACK_CLI_HELP_WIDTH`	用于帮助输出的自定义宽度。

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

WEBPACK_PACKAGE

使用自定义的webpack版本。

在package.json中配置。

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

使用4.0。

npx webpack

使用5.0。

WEBPACK_PACKAGE=webpack-5 npx webpack

webpack｜命令行接口CLI

命令