webpack --mode production: Optimized Builds
webpack --mode production runs the build with production optimizations: minification, scope hoisting, and NODE_ENV=production.
The mode flag is the single most important webpack switch in CI. Production mode turns on the optimizations that make the bundle shippable and sets sensible defaults.
What it does
webpack --mode production sets internal defaults for a release build: it enables TerserPlugin minification, tree-shaking, scope hoisting, and defines process.env.NODE_ENV as "production". --mode development disables those for faster, readable builds.
Common usage
webpack --mode production
webpack --mode production --config webpack.prod.js
# analyze what went into the bundle
webpack --mode production --profile --json > stats.jsonOptions
| Flag | What it does |
|---|---|
| --mode <m> | production, development, or none |
| --config <file> | Path to the webpack config |
| --env <name> | Pass an environment value to a function config |
| --profile | Capture timing/size stats per module |
| --json <file> | Write build stats as JSON |
| --watch | Rebuild on change (do not use in CI) |
In CI
Always pass --mode production for release artifacts; omitting it emits a warning and builds an unoptimized bundle. Set NODE_OPTIONS=--max-old-space-size=4096 on large apps to avoid heap crashes, and cache the node_modules/.cache/webpack directory.
Common errors in CI
"Module not found: Error: Can't resolve \"./Foo\" in ..." usually means a case-sensitive path that resolves on macOS/Windows but not on the Linux runner, or a missing dependency. "FATAL ERROR: Reached heap limit Allocation failed - JavaScript heap out of memory" needs NODE_OPTIONS=--max-old-space-size=4096. "configuration.mode should be one of ..." means a typo in --mode.