Skip to content

INIT.md

Latest commit

 

History

History
80 lines (52 loc) · 3.05 KB

INIT.md

File metadata and controls

80 lines (52 loc) · 3.05 KB

webpack-cli init

webpack-cli init is used to initialize webpack projects quickly by scaffolding configuration and installing modules required for the project as per user preferences.

Initial Setup

A. Local setup

Follow given steps to locally setup webpack-cli init by installing dependencies:

  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 init scaffold

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

B. Global Setup

Follow following steps to setup 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 init scaffold

    $ npm install -g @webpack-cli/init

Usage

A. For local setup:

$ npx webpack-cli init

B. For global setup

$ webpack-cli init

Description of questions asked by generator

  1. Will your application have multiple bundles? (Y/n)

Property/key to resolve: entry

What we are meaning here, is if you want to provide your bundle a single or multiple entry points. If you have more than one entry point to your app, answer yes. If you only have one, answer no.

  1. Which folder will your generated bundles be in? [default: dist]

Property/key to resolve: output.path

This answers to the output directory of your application. The output directory is where servers or your index.html will read the generated bundle from.

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

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

If you answer Yes to this question, we will add ES2015 to your webpack configuration, which will allow you to use modern JavaScript in your project.

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

Property/key to resolve: 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.