Skip to content

Latest commit

 

History

History
145 lines (88 loc) · 4.55 KB

INIT.md

File metadata and controls

145 lines (88 loc) · 4.55 KB

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

These are the steps necessary to set up webpack-cli init locally:

  1. Create package.json through npm

    npm init

  2. Install webpack and webpack-cli as devDependencies

    npm install --save-dev webpack webpack-cli

  3. Install @webpack-cli/init package to add the init scaffold

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

Global Setup

These are the steps necessary to set up webpack-cli init globally:

  1. Install webpack and webpack-cli globally

    npm install -g webpack webpack-cli

  2. Install @webpack-cli/init package to add the create scaffold

    npm install -g @webpack-cli/init

Usage

Running Locally

npx webpack-cli init

Running Globally

webpack-cli init

CLI options

Via defaults

webpack-cli init

To generate default configs

webpack-cli init --auto

To scaffold in a specified path

webpack-cli init --generation-path [path]

Via custom scaffold

webpack-cli init webpack-scaffold-[name]

Description of questions asked by the generator

  1. Will your application have multiple bundles? (y/N)

Property/key resolved: entry

This is used to determine if your app will have multiple entry points. If you want to have multiple entry points, answer yes. If you want to have only one, answer no.

  1. Which will be your application entry point? (src/index)

Property/key resolved: entry

This tells webpack from which file to start bundling your application. The default answer src/index will tell webpack to look for a file called index inside a folder named src.

  1. In which folder do you want to store your generated bundles? (dist)

Property/key resolved: output.path

The output directory is where your bundled application will be. Your index.html will read the generated files from this folder, that is usually named dist.

  1. Will you be using ES2015? (Y/n)

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

This enables webpack to parse ES2015 code. Answer Yes if you want to use modern JavaScript in your project.

  1. Will you use one of the below CSS solutions?

Property/key resolved: module.rules (for .scss,.less,.css,.postCSS files)

If you use any sort of style in your project, such as .less, .scss, .css or postCSS you will need to declare this here. If you don't use CSS, answer no.

  1. If you want to bundle your CSS files, what will you name the bundle? (press enter to skip)

If you indicate based on previous questions that you are using production, this will be enabled. The default value for your generated CSS file is style.[contentHash].css, which will collect all your .less, .scss or .css into one file. This will make your build faster in production.

  1. 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.

  1. 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.

  1. Do you want to add PWA support?

Adds workbox-webpack-plugin which generates a complete service worker for you and one that generates a list of assets to precache that is injected into a service worker file.