webpack-cli Command: Bundle in CI

webpack-cli drives webpack to bundle modules into production assets.

webpack-cli is the command-line front end for webpack, the long-standing JavaScript module bundler. In CI it produces optimized production bundles from an application entry point and a webpack.config.js.

Common flags

--mode production|development - set optimization defaults
-c / --config PATH - use a specific webpack config
--entry FILE - override the entry point
--output-path DIR - override the output directory
--analyze - open the bundle analyzer (requires the plugin)
--stats minimal|errors-only - control build log verbosity
--no-cache - disable the persistent build cache

Example in CI

Run a production build against the project config in a CI job:

shell

webpack --mode production --config webpack.config.js --stats errors-only

Common errors in CI

Module not found: Error: Can't resolve 'X' - bad import path or missing dep
Module parse failed: Unexpected token - missing loader for that file type
JavaScript heap out of memory - raise Node memory (NODE_OPTIONS=--max-old-space-size)
configuration.mode should be one of ... - invalid --mode value

Key takeaways

--mode production enables minification and tree-shaking defaults.
Point --config at the right file when a repo has multiple configs.
Heap OOM on large builds is fixed with NODE_OPTIONS=--max-old-space-size.