Skip to content

INIT.md

Latest commit

 

History

History
104 lines (63 loc) · 3.63 KB

INIT.md

File metadata and controls

104 lines (63 loc) · 3.63 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

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

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

a. Running Locally

npx webpack-cli init

b. Running Globally

webpack-cli init

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.