INIT.md

webpack-cli init

webpack-cli init is used to initialize webpack projects quickly by scaffolding configuration and creating a runnable project with all the dependencies based on the user preferences.

Table of Contents

• Initial Setup
  • Local Setup
  • Global Setup
• Usage
  • Running Locally
  • Running Globally
  • CLI options
• Description of questions asked by the generator
  • Default Template

Setup

Install webpack and webpack-cli as devDependencies

npm install --save-dev webpack webpack-cli

Usage

Running Locally

npx webpack-cli init

Running Globally

webpack-cli init

CLI options

To generate default template

webpack-cli init

To generate with default answers

webpack-cli init -f, --force

To scaffold in a specified path

webpack-cli init [generation-path]

To scaffold specified template

webpack-cli init -t, --template <template-name>

Description of questions asked by the generator

Default template

1. Which of the following JS solutions do you want to use?

Property/key resolved: module.rules (for .js, .ts and other related files)

This enables webpack to parse ES2015 code or Typescript code as per choice.

2. Do you want to use webpack-dev-server?

Property/key resolved: module.rules

Adds a development server to serve webpack bundles and hence make development faster.

3. Do you want to simplify the creation of HTML files for your bundle?

Adds html-webpack-plugin that simplifies creation of HTML files to serve your bundles.

4. Do you want to add PWA support?

Adds workbox-webpack-plugin which generates a complete service worker for you.

5. Which of the following CSS solutions do you want to use?

Property/key resolved: module.rules (for .css files)

If you use any sort of style in your project, such as .css you will need to select this here. If you don't use CSS, answer none.