Command Line Interface | webpack

For proper usage and easier distribution of this configuration, webpack can be configured with webpack.config.js. Any parameters sent to the CLI will map to a corresponding parameter in the configuration file.
Read the installation guide if you don't already have webpack and CLI installed.
webpack-cli v7.0.0+ requires node >= v20.9.0, webpack >= v5.101.0, and webpack-dev-server >= v5.0.0.
If you want to run webpack using npx please make sure you have webpack-cli installed.
webpack-cli offers a variety of commands to make working with webpack easier. By default webpack ships with
Run webpack (default command, can be omitted).
Used to initialize a new webpack project using create-webpack-app.
Location of where to generate the configuration. Defaults to process.cwd().
Name of template to generate.
To generate a project without questions. When enabled, the default answer for each question will be used.
Path to the output directory, e.g. ./loader-name.
Path to the output directory, e.g. ./plugin-name.
See the full documentation of create-webpack-app.
Outputs information about your system.
-a, --additional-package
Adds additional packages to the output.
To get the output in a specified format.
Validate a webpack configuration.
Path to your webpack configuration file. Defaults to ./webpack.config.js.
Run the webpack dev server.
See the full list of options for webpack serve command and related documentation for webpack-dev-server.
Run webpack and watch for files changes.
By default webpack ships with the following flags:
Starting CLI v4 and webpack v5, CLI imports the entire configuration schema from webpack core to allow tuning almost every configuration option from the command line.
Here's the list of all the core flags supported by webpack v5 with CLI v4 - link
For example if you want to enable performance hints in your project you'd use this option in configuration, with core flags you can do -
See configuration for the options in the configuration file.
A filename or a set of named filenames which act as the entry point to build your project. You can pass multiple entries (every entry is loaded on startup). Following are the multiple ways of specifying entry file(s) via CLI -
The --entry-reset option is required to replace the existing entry option, without it the --entry option will add another entry to the existing entries.
Use webpack [command] --entry-reset [entries...] [option] syntax because some options can accept multiple values so webpack --target node ./entry.js means target: ['node', './entry.js']
A path for the bundled file to be saved in. It will be mapped to the configuration options output.path.
If your project structure is as follows -
This will bundle your source code with entry as index.js, and the output bundle file will have a path of dist.
This will form the bundle with both the files as separate entry points.
CLI will look for some default configurations in the path of your project, here are the config files picked up by CLI.
This is the lookup priority in increasing order
example - config file lookup will be in order of webpack.config.js > .webpack/webpack.config.js > .webpack/webpackfile.js
Each base name is resolved against the supported extensions — JavaScript and TypeScript variants (.js, .mjs, .cjs, .ts, .cts, .mts), other supported languages such as .coffee, and, since webpack-cli 7.1.0, the data formats .json5, .yaml/.yml and .toml.
Note that Command Line Interface has a higher precedence for the arguments you use it with than your configuration file. For instance, if you pass --mode="production" to webpack CLI and your configuration file uses development, production will be used.
List basic commands and flags available on the cli