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

LimitChunkCountPlugin

--optimize-min-chunk-size

Limit the minimum volume of chunk

MinChunkSizePlugin

--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

open Module hot replacement

--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
⋮