ag-grid is proud to partner with webpack

Command Line Interface

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 if you don't already have webpack installed.

The new CLI for webpack is under development. New features are being added such as the --init flag. Check it out!

Usage with config file

webpack [--config webpack.config.js]

See configuration for the options in the configuration file.

Usage without config 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]

Common Options

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

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.

Environment Options

When the webpack configuration exports a function, an "environment" may be passed to it.

webpack --env.production    # sets env.production == true
webpack --env.platform=web  # sets env.platform == "web"

The --env argument accepts various syntaxes:

Invocation
Resulting environment
Invocation
webpack --env prod
Resulting environment
"prod"
Invocation
webpack --env.prod
Resulting environment
{ prod: true }
Invocation
webpack --env.prod=1
Resulting environment
{ prod: 1 }
Invocation
webpack --env.prod=foo
Resulting environment
{ prod: "foo" }
Invocation
webpack --env.prod --env.min
Resulting environment
{ prod: true, min: true }
Invocation
webpack --env.prod --env min
Resulting environment
[{ prod: true }, "min"]
Invocation
webpack --env.prod=foo --env.prod=bar
Resulting environment
{prod: [ "foo", "bar" ]}
See the environment variables guide for more information on its usage.

Output Options

This set of options allows you to manipulate certain output parameters of your build.

Parameter
Explanation
Input type
Default
Parameter
--output-chunk-filename
Explanation
The output filename for additional chunks
Input type
string
Default
filename with [id] instead of [name] or [id] prefixed
Parameter
--output-filename
Explanation
The output filename of the bundle
Input type
string
Default
[name].js
Parameter
--output-jsonp-function
Explanation
The name of the JSONP function used for chunk loading
Input type
string
Default
webpackJsonp
Parameter
--output-library
Explanation
Expose the exports of the entry point as library
Input type
string
Default
Parameter
--output-library-target
Explanation
The type for exposing the exports of the entry,point as library
Input type
string
Default
var
Parameter
--output-path
Explanation
The output path for compilation assets
Input type
string
Default
Current directory
Parameter
--output-pathinfo
Explanation
Include a comment with the request for every dependency
Input type
boolean
Default
false
Parameter
--output-public-path
Explanation
The public path for the assets
Input type
string
Default
/
Parameter
--output-source-map-filename
Explanation
The output filename for the SourceMap
Input type
string
Default
[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 Options

This set of options allows you to better debug the application containing assets compiled with webpack

Parameter
Explanation
Input type
Default value
Parameter
--debug
Explanation
Switch loaders to debug mode
Input type
boolean
Default value
false
Parameter
--devtool
Explanation
Define source map type for the bundled resources
Input type
string
Default value
-
Parameter
--progress
Explanation
Print compilation progress in percentage
Input type
boolean
Default value
false

Module Options

These options allow you to bind modules as allowed by webpack

Parameter
Explanation
Usage
Parameter
--module-bind
Explanation
Bind an extension to a loader
Usage
--module-bind js=babel-loader
Parameter
--module-bind-post
Explanation
Bind an extension to a post loader
Usage
Parameter
--module-bind-pre
Explanation
Bind an extension to a pre loader
Usage

Watch Options

These options makes the build watch for changes in files of the dependency graph and perform the build again.

Parameter
Explanation
Parameter
--watch, -w
Explanation
Watch the filesystem for changes
Parameter
--save, -s
Explanation
Recompiles on save regardless of changes
Parameter
--watch-aggregate-timeout
Explanation
Timeout for gathering changes while watching
Parameter
--watch-poll
Explanation
The polling interval for watching (also enable polling)
Parameter
--watch-stdin, --stdin
Explanation
Exit the process when stdin is closed

Optimize Options

These options allow you to manipulate optimisations for a production build using webpack

Parameter
Explanation
Plugin Used
Parameter
--optimize-max-chunks
Explanation
Try to keep the chunk count below a limit
Plugin Used
Parameter
--optimize-min-chunk-size
Explanation
Try to keep the chunk size above a limit
Plugin Used
Parameter
--optimize-minimize
Explanation
Minimize javascript and switches loaders to minimizing

Resolve Options

These allow you to configure the webpack resolver with aliases and extensions.

Parameter
Explanation
Example
Parameter
--resolve-alias
Explanation
Setup a module alias for resolving
Example
--resolve-alias jquery-plugin=jquery.plugin
Parameter
--resolve-extensions
Explanation
Setup extensions that should be used to resolve,modules
Example
--resolve-extensions .es6 .js .ts
Parameter
--resolve-loader-alias
Explanation
Minimize javascript and switches loaders to minimizing
Example

Stats Options

These options allow webpack to display various stats and style them differently in the console output.

Parameter
Explanation
Type
Parameter
--color, --colors
Explanation
Enables/Disables colors on the console [default: (supports-color)]
Type
boolean
Parameter
--display
Explanation
Select display preset (verbose, detailed, normal, minimal, errors-only, none; since webpack 3.0.0)
Type
string
Parameter
--display-cached
Explanation
Display also cached modules in the output
Type
boolean
Parameter
--display-cached-assets
Explanation
Display also cached assets in the output
Type
boolean
Parameter
--display-chunks
Explanation
Display chunks in the output
Type
boolean
Parameter
--display-depth
Explanation
Display distance from entry point for each module
Type
boolean
Parameter
--display-entrypoints
Explanation
Display entry points in the output
Type
boolean
Parameter
--display-error-details
Explanation
Display details about errors
Type
boolean
Parameter
--display-exclude
Explanation
Exclude modules in the output
Type
boolean
Parameter
--display-max-modules
Explanation
Sets the maximum number of visible modules in output
Type
number
Parameter
--display-modules
Explanation
Display even excluded modules in the output
Type
boolean
Parameter
--display-optimization-bailout
Explanation
Scope hoisting fallback trigger (since webpack 3.0.0)
Type
boolean
Parameter
--display-origins
Explanation
Display origins of chunks in the output
Type
boolean
Parameter
--display-provided-exports
Explanation
Display information about exports provided from modules
Type
boolean
Parameter
--display-reasons
Explanation
Display reasons about module inclusion in the output
Type
boolean
Parameter
--display-used-exports
Explanation
Display information about used exports in modules (Tree Shaking)
Type
boolean
Parameter
--hide-modules
Explanation
Hides info about modules
Type
boolean
Parameter
--sort-assets-by
Explanation
Sorts the assets list by property in asset
Type
string
Parameter
--sort-chunks-by
Explanation
Sorts the chunks list by property in chunk
Type
string
Parameter
--sort-modules-by
Explanation
Sorts the modules list by property in module
Type
string
Parameter
--verbose
Explanation
Show more details
Type
boolean

Advanced Options

Parameter
Explanation
Usage
Parameter
--bail
Explanation
Abort the compilation on first error
Usage
Parameter
--cache
Explanation
Enable in memory caching [Enabled by default for watch]
Usage
--cache=false
Parameter
--define
Explanation
Define any free variable, see shimming
Usage
--define process.env.NODE_ENV='development'
Parameter
--hot
Explanation
Usage
--hot=true
Parameter
--labeled-modules
Explanation
Enables labeled modules [Uses LabeledModulesPlugin]
Usage
Parameter
--plugin
Explanation
Load this plugin
Usage
Parameter
--prefetch
Explanation
Prefetch the particular file
Usage
--prefetch=./files.js
Parameter
--provide
Explanation
Provide these modules as globals, see shimming
Usage
--provide jQuery=jquery
Parameter
--records-input-path
Explanation
Path to the records file (reading)
Usage
Parameter
--records-output-path
Explanation
Path to the records file (writing)
Usage
Parameter
--records-path
Explanation
Path to the records file
Usage
Parameter
--target
Explanation
The targeted execution environment
Usage
--target='node'

Shortcuts

Shortcut
Replaces
Shortcut
-d
Replaces
--debug --devtool cheap-module-eval-source-map --output-pathinfo
Shortcut
-p
Replaces
--optimize-minimize --define process.env.NODE_ENV="production", see building for production

Profiling

The --profile option captures timing information for each step of the compilation and includes this 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
⋮

Further Reading


Contributors