• Angular CLI is command line for creating an angular application
• This tool provides all the features and as well as commands to create the angular apps in an easy way.
• Eases your angular development process
• It will make your development process easy and thus you can reduce the development lifecycle
• When you install Angular CLI tool and create the project, it creates entire project development environment automatically.
• It provides you the basic necessary files that involve in code development process.
• When you create the project with the help of angular CLI tool, it will auto-configure your project. No need for manual configuration to set up the project.
• Overall it will reduce the development task and hence you can complete the project in the very fast manner and easy to work with the project.

What is Webpack?

• Webpack is a module bundler for JavaScript applications and also we can it as a build tool
• A bundler is a software that bundles your application code along with its resources into a minimized, zipped bundle that can be easily deployed on the server
• Bundler is software, to bundle the code and in a form of zipped format.
• Module bundling is the process of converting code into a pure JavaScript file along with their dependencies by scanning import statement into the minimized format. Hence we can deploy on a server very easy manner

How does it work?

cats.js

   var cats = [‘dave’, ‘henry’, ‘martha’];

   module.exports = cats;

• Webpack will read the entry point very first and scan the entire files through import statement, analyze its dependencies
  

  app.js

 
  cats = require(‘./cats.js’);

  Q console.log(cats);

• Webpack bundle the entry point file and all dependent file with their dependencies into a single JS file

Core Concepts

• Entry
• Output
• Loaders
• Plugins

Configuration Setup

• Step 1:create your project folder
• Step 2: package.json -> npm init –y​​
• Step 2: Install webpack ->npm i -S webpack
• Step​​ 3: Install Webpack CLI ->npmi -D webpack-cli

Loaders

1.Sass Loader

                         npm install css-loader sass-loader –save-dev

2.Babel Loader

                         npm install –save-dev babel-loader babel-core

3.Css Loader

                         npm install –save-dev css-loader

4.ts Loader

                         npm install –save-dev ts-loader

Webpack-dev-server (WDS)

• web-server to serve our application locally on some port on localhost.
• WDS sever will serve the applications local machines
• It will create build at the memory and uses the build for serve from memory directly
• npm install web pack-dev-server –save-dev
• npm install HTML-web pack-plugin