webpack provides a Command Line Interface (CLI) to configure and interact with your build. This is mostly useful in case of early prototyping, profiling, writing npm scripts or personal customization of the build.
For proper usage and easy 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 config file.
Have a look at the installation guide unless you have webpack already running.
The new CLI for webpack is under development. New features are being added such as the --init flag. Check it out!
webpack [--config webpack.config.js]
See configuration for the options in the configuration file.
webpack <entry> [<entry>] <output>
<entry>
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). If you pass a pair in the form <name>=<request> you can create an additional entry point. It will be mapped to the configuration option entry.
<output>
A path and filename for the bundled file to be saved in. It will be mapped to the configuration options output.path and output.filename.
Example
If your project structure is as follows -
.
├── dist
├── index.html
└── src
├── index.js
├── index2.js
└── others.js
webpack src/index.js dist/bundle.js
This will bundle your source code with entry as index.js and the output bundle file will have a path of dist and the filename will be bundle.js
| Asset | Size | Chunks | Chunk Names |
|-----------|---------|-------------|-------------|
| bundle.js | 1.54 kB | 0 [emitted] | index |
[0] ./src/index.js 51 bytes {0} [built]
[1] ./src/others.js 29 bytes {0} [built]
webpack index=./src/index.js entry2=./src/index2.js dist/bundle.js
This will form the bundle with both the files as separate entry points.
| Asset | Size | Chunks | Chunk Names |
|-----------|---------|---------------|---------------|
| bundle.js | 1.55 kB | 0,1 [emitted] | index, entry2 |
[0] ./src/index.js 51 bytes {0} [built]
[0] ./src/index2.js 54 bytes {1} [built]
[1] ./src/others.js 29 bytes {0} {1} [built]
List all of the options available on the cli
webpack --help webpack -h
Build source using a config file
Specifies a different configuration file to pick up. Use this if you want to specify something different than webpack.config.js, which is the default.
webpack --config example.config.js
Specify build environment
Send environment variable to be used in webpack config file.
webpack --env.production # sets production to true webpack --env.platform=web # sets platform to "web"
Print result of webpack as a JSON
webpack --json webpack --json > stats.json
In every other case, webpack prints out a set of stats showing bundle, chunk and timing details. Using this option the output can be a JSON object. This response is accepted by webpack's analyse tool, or chrisbateman's webpack-visualizer, or th0r's webpack-bundle-analyzer. The analyse tool will take in the JSON and provide all the details of the build in graphical form.
Further reads:
This set of options allows you to manipulate certain output parameters of your build.
webpack index=./src/index.js index2=./src/index2.js --output-path='./dist' --output-filename='[name][hash].bundle.js'
| Asset | Size | Chunks | Chunk Names |
|--------------------------------------|---------|-------------|---------------|
| index2740fdca26e9348bedbec.bundle.js | 2.6 kB | 0 [emitted] | index2 |
| index740fdca26e9348bedbec.bundle.js | 2.59 kB | 1 [emitted] | index |
[0] ./src/others.js 29 bytes {0} {1} [built]
[1] ./src/index.js 51 bytes {1} [built]
[2] ./src/index2.js 54 bytes {0} [built]
webpack.js index=./src/index.js index2=./src/index2.js --output-path='./dist' --output-filename='[name][hash].bundle.js' --devtool source-map --output-source-map-filename='[name]123.map'
| Asset | Size | Chunks | Chunk Names |
|--------------------------------------|---------|-------------|---------------|
| index2740fdca26e9348bedbec.bundle.js | 2.76 kB | 0 [emitted] | index2 |
| index740fdca26e9348bedbec.bundle.js | 2.74 kB | 1 [emitted] | index |
| index2123.map | 2.95 kB | 0 [emitted] | index2 |
| index123.map | 2.95 kB | 1 [emitted] | index |
[0] ./src/others.js 29 bytes {0} {1} [built]
[1] ./src/index.js 51 bytes {1} [built]
[2] ./src/index2.js 54 bytes {0} [built]
This set of options allows you to better debug the application containing assets compiled with webpack
These options allow you to bind modules as allowed by webpack
These options makes the build watch for changes in files of the dependency graph and perform the build again.
These options allow you to manipulate optimisations for a production build using webpack
These allow you to configure the webpack resolver with aliases and extensions.
These options allow webpack to display various stats and style them differently in the console output.
This option profiles the compilation and includes this information in the stats output. It gives you an in depth idea of which step in the compilation is taking how long. This can help you optimise your build in a more informed manner.
webpack --profile 30ms building modules 1ms sealing 1ms optimizing 0ms basic module optimization 1ms module optimization 1ms advanced module optimization 0ms basic chunk optimization 0ms chunk optimization 1ms advanced chunk optimization 0ms module and chunk tree optimization 1ms module reviving 0ms module order optimization 1ms module id optimization 1ms chunk reviving 0ms chunk order optimization 1ms chunk id optimization 10ms hashing 0ms module assets processing 13ms chunk assets processing 1ms additional chunk assets processing 0ms recording 0ms additional asset processing 26ms chunk asset optimization 1ms asset optimization 6ms emitting
© 2012–2016 Tobias Koppers
Licensed under the Creative Commons Attribution License 4.0.
https://webpack.js.org/api/cli/