- 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
0 Comments