Cheatwebpack JS module bundler
Light · Postcard
102 × 152 mm · PDF
Dark · Postcard
102 × 152 mm · PDF
Ink saver · Postcard
102 × 152 mm · PDF
Light · A4 landscape
297 × 210 mm · PDF
Dark · A4 landscape
297 × 210 mm · PDF
Ink saver · A4 landscape
297 × 210 mm · PDF
Light · A3 landscape
420 × 297 mm · PDF
Dark · A3 landscape
420 × 297 mm · PDF
Ink saver · A3 landscape
420 × 297 mm · PDF
Start here
npm i -D webpack webpack-cli
Install locally
npx webpackBuild with config
npx webpack --mode production
Minified build
npx webpack watch
Rebuild on change
npx webpack serve --open
Dev server
npx webpack configtest
Check the config
npx webpack --analyze
Inspect bundle size
npx webpack info
Print system info
Concepts
- Entry ./src/index.js
- Loaders module.rules
- Plugins whole bundle
- Output dist/
Commands
npx webpack [entries...]
Build (default command)
npx webpack build
Build, explicit form
npx webpack watch
Build and rebuild on changes
npx webpack serve
Run webpack-dev-server
npx webpack configtest [path]
Validate a config file
Defaults to ./webpack.config.js.
npx webpack info
Show system and package info
npx webpack version
Show webpack, CLI, dev-server versions
npx webpack help [cmd]
Help for a command or option
npx create-webpack-app [dir]
Scaffold a new project
npx create-webpack-app plugin [dir]
Scaffold a plugin
npx create-webpack-app loader [dir]
Scaffold a loader
Build options
--mode <mode>
development, production or none
-c, --config <file>
Use this config file
--entry <path>
Add an entry point
--entry-reset <path>
Replace configured entries
-o, --output-path <dir>
Output directory
-t, --target <target>
Build target, e.g. web or node
-d, --devtool <type>
Source map style
--no-devtoolDisable source maps
--name <name>
Name this configuration
--fail-on-warnings
Exit non-zero on warnings
-w, --watchWatch for changes
--no-watchDo not watch
Config and env
--env <key>[=<value>]
Pass env to a function config
Repeatable; read as the first argument of a config function.
--config-node-env <env>
Set process.env.NODE_ENV
--config-name <name>
Run only the named config
--mergeMerge several --config files
-e, --extends <file>
Extend another config
--disable-interpret
Skip interpret when loading config
WEBPACK_SERVE / WEBPACK_BUILD / WEBPACK_WATCH
Built-in env flags
NODE_OPTIONS=--max-old-space-size=4096 npx webpack
Give the build more memory
Output and analysis
--stats <preset>
Stats output detail
--no-statsSilence stats output
--json [file]Print or write stats as JSON
--analyzeOpen webpack-bundle-analyzer
--progress[=profile]
Show progress, optionally profile
--color / --no-color
Toggle console colors
--help=verboseList every flag
Dev server
npx webpack serve --open
Serve and open the browser
npx webpack serve --static <dir>
Serve static files from a dir
npx webpack serve --no-hot
Disable hot reloading
npx webpack serve --mode development
Serve in development mode
Config files
| Base name | Extensions |
|---|---|
webpack.config |
js mjs cjs ts cts mts |
.webpack/webpack.config |
same |
.webpack/webpackfile |
same |
Recipes
const path = require('path');module.exports = { entry: './src/index.js', output: { path: path.resolve(__dirname, 'dist'), filename: '[name].js' }, module: { rules: [{ test: /\.css$/, use: ['style-loader', 'css-loader'] }] }, plugins: [], devServer: { static: './dist', hot: true },};# webpack.config.js exports (env, argv) => ({...})npx webpack --env production --mode productionnpx webpack serve --env port=3000npx webpack --mode production --json stats.json# upload stats.json to an analyzer, or:npx webpack --mode production --analyzenpx webpack configtestnpx webpack --mode production --fail-on-warnings
