• 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 Web pack?

• 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');

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