• 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

E:\img\npm i -s webpack-cli.png

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

 

 

 

 

 

Contact Us