为了更合适且方便地使用配置，可以在 webpack.config.js 中对 webpack 进行配置。CLI 中传入的任何参数会在配置文件中映射为对应的参数。
如果你还没有安装过 webpack 和 CLI，请先阅读 安装指南。
警告如果你想使用 npx 来运行 webpack，请确保你已经安装了 webpack-cli。
命令webpack-cli 提供了许多命令来使 webpack 的工作变得更简单。默认情况下，webpack 提供了以下命令：
CommandUsageDescriptionbuildbuild|bundle|b [entries...] [options]Run webpack (default command, can be omitted).configtestconfigtest|t [config-path]Validate a webpack configuration.helphelp|h [command] [option]Display help for commands and options.infoinfo|i [options]Outputs information about your system.initinit|create|c|new|n [generation-path] [options]Initialize a new webpack project.loaderloader|l [output-path] [options]Scaffold a loader.pluginplugin|p [output-path] [options]Scaffold a plugin.serveserve|server|s [options]Run the webpack-dev-server.versionversion|v [commands...]Output the version number of webpack, webpack-cli and webpack-dev-server.watchwatch|w [entries...] [options]Run webpack and watch for files changes.Build运行 webpack（默认命令，可用输出文件）。
npx webpack build [options]示例
npx webpack build --config ./webpack.config.js --stats verboseInit用于初始化一个新的 webpack 项目。
npx webpack init [generation-path] [options]example
npx webpack init ./my-app --force --template=default生成路径生成配置的位置。默认为 process.cwd()。
配置-t, --template
string = 'default'
要生成的模板名称。
-f, --force
boolean
不输入配置项就生成一个项目。该配置启用时所有命令行配置项将使用默认值。
提示点击 这里 获取 webpack init 命令的完整文档。
Loader初始化一个 loader。
npx webpack loader [output-path] [options]示例
npx webpack loader ./my-loader --template=defaultOutput Path输出文件夹，例如 ./loader-name。
Options-t, --template
string = 'default'
模板类型。
Plugin初始化一个插件。
npx webpack plugin [output-path] [options]示例
npx webpack plugin ./my-plugin --template=defaultOutput Path输出文件夹，例如 ./plugin-name.
Options-t, --template
string = 'default'
模板类型。
Info输出你的系统信息。
npx webpack info [options]示例
npx webpack info --output json --addition-package postcssinfo 配置项-a, --additional-package
string
在输出信息中添加额外的包。
example
npx webpack info --additional-package postcss-o, --output
string : 'json' | 'markdown'
获取指定格式的输出。
示例
npx webpack info --output markdownConfigtest校验 webpack 配置。
npx webpack configtest [config-path]示例
npx webpack configtest ./webpack.config.jsConfig Path你的 webpack 配置文件路径。默认为 ./webpack.config.js。
Serve运行 webpack 开发服务器。
npx webpack serve [options]示例
npx webpack serve --static --open提示查看 webpack serve 命令的所有可用配置项 和 webpack-dev-server 的相关文档。
Watch运行 webpack 并且监听文件变化。
npx webpack watch [options]示例
npx webpack watch --mode developmentFlags默认情况下，webpack 提供了以下 flag：
Flag / 别名类型描述--entrystring[]应用程序的入口文件，例如 ./src/main.js--config, -cstring[]提供 webpack 配置文件的路径，例如 ./webpack.config.js--config-namestring[]要使用的配置名--namestring配置名称，在加载多个配置时使用--colorboolean启用控制台颜色--merge, -mboolean使用 webpack-merge 合并两个配置文件，例如 -c ./webpack.config.js -c ./webpack.test.config.js--envstring[]当它是一个函数时，传递给配置的环境变量--progressboolean, string在构建过程中打印编译进度--helpboolean输出所有支持的 flag 和命令--output-path, -ostringwebpack 生成文件的输出位置，例如 ./dist--target, -tstring[]设置要构建的 target--watch, -wboolean监听文件变化--watch-options-stdinbooleanstdin stream 结束时，停止监听--hot, -hboolean启用 HMR--devtool, -dstring控制是否生成 source map，以及如何生成--prefetchstring预先发生请求--json, -jboolean, string将结果打印成 JSON 格式或存储在文件中--modestring定义 webpack 所需的 mode--version, -vboolean获取当前 cli 版本--statsboolean, string它告诉 webpack 如何处理 stats--analyzeboolean它调用 webpack-bundle-analyzer 插件来获取 bundle 信息Negated FlagsFlag描述--no-color禁用控制台颜色--no-hot如果你通过配置启用了 HMR，则禁用它--no-stats禁用任何由 webpack emit 出来的 stats--no-watch禁用文件变更的监听--no-devtool禁止生成 source maps核心 Flags从 CLI v4 和 webpack v5 开始，CLI 将采用从 webpack 的 core 中导入整个配置的模式，允许 CLI 调整几乎所有配置项。
链接中是 webpack v5 和 CLI v4 支持的所有核心 flag 列表 - 详戳
例如，如果你想在项目中启用性能提示，你需在配置中使用此选项，而如果使用核心 flag，你可以这样做：
npx webpack --performance-hints warning用法使用配置文件npx webpack [--config webpack.config.js]配置文件中的相关选项，请参阅配置。
不使用配置文件npx webpack --entry
npx webpack --entry ./first.js --entry ./second.js --output-path /buildentry构建项目时入口可以配置一个文件名或一组被命名过的文件名。你可以传递多个入口（每个入口在启动时加载）。
如下是通过 CLI 指定 entry 的多种方式：
npx webpack ./first-entry.jsnpx webpack --entry ./first-entry.jsnpx webpack ./first-entry.js ./other-entry.jsnpx webpack --entry ./first-entry.js ./other-entry.js提示使用 webpack [command] [entries...] [option] 语法，主要是因为某些选项支持接受多个值。因此，你可以用 webpack --target node ./entry.js 表示 target: ['node', './entry.js']。
output-path用于存储构建后的文件路径。它将映射到配置选项 output.path。
示例
假设你的项目结构像下面这样：
.
├── dist
├── index.html
└── src
├── index.js
├── index2.js
└── others.jsnpx webpack ./src/index.js --output-path dist这将对源码进行打包，其入口为 index.js，且 bundle 文件的输出路径为 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 msnpx 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',
通用配置警告注意，命令行接口（Command Line Interface）参数的优先级，高于配置文件参数。例如，如果将 --mode="production" 传入 webpack CLI，而配置文件使用的是 development，最终会使用 production。
help列出命令行可用的基础命令和 flag
通过 webpack help [command] [option] 以及 webpack [command] --help 均可获得帮助信息：
npx webpack --help
# or
npx webpack help列出所有 cli 支持的命令和 flag
npx webpack --help=verbose查看特定命令或选项的帮助：
npx webpack help --modeversion显示已安装的 package 以及子 package 的版本。
如需检查你正在使用的 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.2config使用配置文件进行构建
配置文件默认为 webpack.config.js，还可以指定其它的配置文件。
npx webpack --config example.config.jsconfig-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',
},
];并且只想运行第二个配置项：
npx webpack --config-name second你也可以传递多个值来实现：
npx webpack --config-name first --config-name secondmerge你可以通过 --merge 选项来合并两个或多个不同的 webpack 配置：
npx webpack --config ./first.js --config ./second.js --mergejson以 JSON 格式输出 webpack 的运行结果
npx webpack --json如果你想把 stats 数据存储为 JSON 而非输出，你可以使用：
npx webpack --json stats.json在其他情况下，webpack 会打印出 bundle、chunk 以及 timing 细节的 stats 信息。使用此选项，会输出 JSON 对象。这个输出结果可以被 webpack 的 analyse 工具，或者 chrisbateman 的 webpack-visualizer，再或者 th0r 的 webpack-bundle-analyzer 所识别。analyse 工具会接收 JSON，并以图形的形式展示所有构建的细节。
提示请查阅 stats 数据 api，了解更多关于生成的 stats 数据。
Environment 选项当 webpack 配置导出为函数时，会接收到一个 "environment" 的参数。
envnpx webpack --env production # env.production = true--env 参数可以接收多个值：
InvocationResulting environmentnpx 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" }提示如果你想将一个变量设置为空字符串（""），你可能需要在终端上转义字符，就像这样：npx webpack --env foo=\"\"
提示请查阅 environment 变量指南了解更多信息及用法。
除了上面所说的自定义 env 变量，在你的 webpack 配置中也使用了一些 env 内置变量：
变量名描述WEBPACK_SERVE如果使用了 serve|server|s，则为 true。WEBPACK_BUILD如果使用了 build|bundle|b，则为 true。WEBPACK_WATCH如果使用了 --watch|watch|w，则为 true。请注意你不能在 bundle 代码中使用这些内置环境变量。
module.exports = (env, argv) => {
return {
mode: env.WEBPACK_SERVE ? 'development' : 'production',
};
};node-env你可以使用 --node-env 选项来设置 process.env.NODE_ENV:
npx webpack --node-env production # process.env.NODE_ENV = 'production'提示如果你不明确的设置 mode，mode 选项的值会被 --node-env 覆盖。例如 --node-env production 时，会把 process.env.NODE_ENV 和 mode 均设置为 'production'。
配置选项参数说明输入类型默认值--config配置文件的路径string[]默认配置--config-name要使用的配置名string[]--env当配置文件为函数时，environment 将作为参数传递给配置string[]分析 Bundle你可以使用 webpack-bundle-analyzer 插件来分析你 webpack 输出的 bundle。你还可以通过 CLI 的 --analyze flag 调用它
npx webpack --analyze警告请确保你的项目中安装了 webpack-bundle-analyzer，否则 CLI 会提示你安装它。
Progress如需查看 webpack 的编译进度，你可以使用 --progress flag。
npx webpack --progress如需收集编译过程中每一步的 profile 数据，你可以将 profile 作为值传递给 --progress flag。
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退出代码及其含义退出代码描述0成功1webpack Error2配置/选项问题，或者内部错误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.esmWEBPACK_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 webpackTroubleshootingTypeError [ERR_UNKNOWN_FILE_EXTENSION]: Unknown file extension ".ts" for ./webpack.config.tsYou might encounter this error in the case of using native ESM in TypeScript (i.e. type: "module" in package.json).
webpack-cli supports configuration in both CommonJS and ESM format, at first it tries to load a configuration using require(), once it fails with an error code of 'ERR_REQUIRE_ESM' (a special code for this case) it would try to load the configuration using import().
However, the import() method won't work with ts-node without loader hooks enabled (described at TypeStrong/ts-node#1007).
To fix the error above use the following command:
NODE_OPTIONS="--loader ts-node/esm" npx webpack --entry ./src/index.js --mode productionFor more information, see our documentation on writing a webpack configuration in TypeScript.