Getting Started with Webpack CLI - Quick and Dirty Howto

Create index.html.

Create folder src with index.js file in it.

Run:

npm init —y

npm install webpack webpack-cli @webpack-cli/init  --save-dev

npx webpack-cli init

Use all default values.

replace package.json’s scripts section with:

"scripts": {
"build-dev": "webpack-cli --mode=development -w",
"build-prod": "webpack-cli --mode=production -w",
"build": "webpack-cli --mode=none -w",
}

Commands to run for each mode with watch enabled:

npm run build-dev

npm run build-prod

npm run build

add following tag to index.html before < /body>:

< script src="dist/main.js"></script>

Tip: If you prefer to use the command-line to change modes:

npx webpack-cli --mode=development

npx webpack-cli --mode=production

npx webpack-cli --mode=none