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