View original text|Edit this page
Official documents
In order to use the configuration more appropriately and conveniently, you can config. Configure webpack in JS. Any parameter passed in from the CLI is mapped to the corresponding parameter in the configuration file.
If you haven't installed webpack, please check Installation guide.
A new CLI for webpack is under development. Adding new features, such as -- init parameter. View details!
Usage of use profile
webpack [--config webpack.config.js]
For relevant options in the configuration file, see to configure.
Usage without profile
webpack <entry> [<entry>] -o <output>
<entry>
A file name or a set of named file names is used as the starting point for building the project. You can pass multiple entries (each loaded at startup). If you pass a key value pair in the form of < name > = < request >, you can create an additional entry starting point. It will be mapped to the entry attribute of the configuration option.
<output>
The path and file name of the bundled file to save. It maps to the configuration option output Path and output filename.
Examples
Suppose your project structure looks like this:
. ├── dist ├── index.html └── src ├── index.js ├── index2.js └── others.js webpack src/index.js dist/bundle.js
Package the source code, and the entry is index JS, and the path of the output file is dist and the file name is 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
Package files with multiple entries
| 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]
Common configuration
Lists all available configuration options on the command line
webpack --help webpack -h
Build using configuration files
Specify other to configure Documents. The configuration file defaults to webpack config. JS, if you want to use other configuration files, you can add this parameter.
webpack --config example.config.js
Output the running results of webpack in JSON format
webpack --json webpack --json > stats.json
In each other case, webpack prints a set of statistics to display details such as bundle, chunk and time. With this option, the output can be a JSON object. This output file (response) can be used by webpack Analysis tools , or christbateman's webpack visualization tool , or th0r webpack bundle analysis tool Analyze after receiving. The analysis tool will receive JSON and provide all the details of the build in graphical form.
Environment options
When the webpack configuration object Export as a function You can pass an "environment object" to the.
webpack --env.production # Set env production == true webpack --env.platform=web # Set env platform == "web"
--env parameters have a variety of syntax: accept variable syntax:
Invocation
Resulting environment
webpack --env prod "prod" webpack --env.prod { prod: true } webpack --env.prod=1 { prod: 1 } webpack --env.prod=foo { prod: "foo" } webpack --env.prod --env.min { prod: true, min: true } webpack --env.prod --env min [{ prod: true }, "min"] webpack --env.prod=foo --env.prod=bar {prod: [ "foo", "bar" ]}
See the environment variables guide for more information on its usage.
configuration option
parameter
explain
Input type
Default value
--config
Path to configuration file
string
webpack.config.js or webpackfile js
--config-register, -r
Preload one or more modules before loading the webpack configuration file
array
--config-name
Configuration name to use
string
--env
When the configuration file is a function, the environment variable is passed to this function
--mode
The mode used is one of "development" or "production"
string
Output configuration
You can adjust some of these configurations through the following processes output Parameters.
parameter
explain
Input type
Default value
--output-chunk-filename
The file name of the output with chunk
string
The file name with [id] instead of [name] or [id] as a prefix
--output-filename
The file name of the package file
string
[name].js
--output-jsonp-function
The name of the JSONP function used when loading chunk
string
webpackJsonp
--output-library
Export the entry file as a library
string
--output-library-target
The type of output when exporting an entry file as a library
string
var
--output-path
Output path (based on public path)
string
current directory
--output-pathinfo
Add some notes that depend on information
boolean
false
--output-public-path
The public path to use when exporting files
string
/
--output-source-map-filename
The file name of the generated SourceMap
string
[name].map or [outputFilename].map
Example usage
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]
Debug configuration
The following configurations can help you debug better during Webpack compilation.
parameter
explain
Input type
Default value
--debug
Set the loader to debug mode
boolean
false
--devtool
Define [type of source map] for packaged resources
string
-
--progress
Print out the percentage value of compilation progress
boolean
false
--display-error-details
Show error details
boolean
false
Module configuration
These configurations can be used to bind what Webpack allows modular.
parameter
explain
usage
--module-bind
Bind an extension to the loader
--module-bind js=babel-loader --module-bind-post
Bind an extension for post loader
--module-bind-pre
Bind an extension for pre loader
Watch configuration
These configurations can be used for observation Depending on the change of the file, once there is a change, you can re execute the build process.
parameter
explain
--watch`, `-w
Observe file system changes
--watch-aggregate-timeout
Specify a number of milliseconds during which files will be merged if they are sent with multiple changes
--watch-poll
Time interval for polling to observe file changes (polling mechanism will be turned on at the same time)
--watch-stdin`, `--stdin
When stdin closes, the process exits
Performance optimization configuration
During the construction of production environment, these configurations can be used to adjust some performance related configurations.
parameter
explain
Plug in used
--optimize-max-chunks
Limit the number of chunk s
--optimize-min-chunk-size
Limit the minimum volume of chunk
--optimize-minimize
Compress the obfuscated javascript and set the loader to minizing
UglifyJsPlugin & LoaderOptionsPlugin
Resolve configuration
These configurations can be used to set up webpack resolver Alias and extension used when.
parameter
explain
Examples
--resolve-alias
Specifies the alias of the module
--resolve-alias jquery-plugin=jquery.plugin
--resolve-extensions
Specifies the extension of the file to be processed
--resolve-extensions .es6 .js .ts
--resolve-loader-alias
Minimize javascript and switches loaders to minimizing
Statistical data configuration
The following options are used to configure the output of Webpack on the console statistical data , and the style of these data.
parameter
explain
Type
--color`, `--colors
E color to turn the console on / off [default: (supports color)]
boolean
--display
choice Display preset (verbose - cumbersome, detailed - detailed, normal - normal, minimal - minimal, errors only - errors only, none - none; start with webpack 3.0.0)
string
--display-cached
Show cached modules in output
boolean
--display-cached-assets
Displays cached assets in the output
boolean
--display-chunks
Show chunks in output
boolean
--display-depth
Displays the distance from the starting point of the entrance to each module
boolean
--display-entrypoints
Displays the entry file in the output
boolean
--display-error-details
Displays detailed error information
boolean
--display-exclude
Show excluded files in output
boolean
--display-max-modules
Sets the maximum number of visible modules in the output
number
--display-modules
Displays all modules in the output, including excluded modules
boolean
--display-optimization-bailout
Scope lifting fallback trigger (starting from webback 3.0.0)
boolean
--display-origins
Displays the original chunk in the output
boolean
--display-provided-exports
Displays information about exporting from the module
boolean
--display-reasons
Displays the reason why the module is included in the output
boolean
--display-used-exports
Interface used in display module (Tree Shaking)
boolean
--hide-modules
Hide information about modules
boolean
--sort-assets-by
Sort the assets list by some attribute
string
--sort-chunks-by
Sort the chunks list by some attribute
string
--sort-modules-by
Sort the module list by some attribute
string
--verbose
Show more information
boolean
Advanced configuration
parameter
explain
usage
--bail
In the event of an error, terminate immediately
--cache
Enable cache [it will be on by default when watch ing]
--cache=false --define
Define any free variable in the bundle and view it shimming
--define process.env.NODE_ENV='development' --hot
--hot=true --labeled-modules
Open module label [use labeledmodules plugin]
--plugin
Load a plug-in unit
--prefetch
Preload a file
--prefetch=./files.js --provide
Provide these modules as free variables in all modules. View shimming
--provide jQuery=jquery --records-input-path
Path of record file (read)
--records-output-path
Path of record file (write)
--records-path
The path of the record file
--target
target Execution environment
--target='node'
Abbreviation
Abbreviation
meaning
-d
--debug --devtool cheap-module-eval-source-map --output-pathinfo
-p
--optimize-minimize --define process.env.NODE_ENV="production", see building for production
Profiling
--The profile option captures the time information of each step at compile time and includes this information in the output.
webpack --profile ⋮ [0] ./src/index.js 90 bytes {0} [built] factory:22ms building:16ms = 38ms
For each module, the following details are included in the output as applicable:
- factory: time to collect module metadata (e.g. resolving the filename)
- building: time to build the module (e.g. loaders and parsing)
- dependencies: time to identify and connect the module's dependencies
Paired with --progress, --profile 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 --progress --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 ⋮