Webpack, angular cli, npm, yarn babel,

Angular CLI

Angular CLI is abbreviated for Angular command line interface.

Angular CLI creates the ideal Angular environment for your Angular app. It includes all the importing, packaging, BrowsLinks using Webpack all by itself. But there is no need for you to know what is a Webpack or how it works, because all of the webpack configuration is completely done by Angular CLI thus it takes all that burden off of the developer's shoulders.

Angular cli makes it easier to work in angular environment. As it contains whole bunch of commands to create core building blocks of angular and to even unit -testing them.

CLI is shipped with WebPack which bundles javascript and css files dynamically and add them to index. html like main.bundle.js , polyfill.bundle. js etc. .

webpack is powerful. It is incredibly configurable. However, this power and flexibility can make for a rather steep learning curve.

Learning about webpack is one of the major hurdles to getting up and running with modern JavaScript frameworks like React and Angular. The nice folks on the Angular team wanted to make it easier for people to start using Angular.

They did this by embedding webpack in the Angular CLI. Now, as an Angular developer you don’t need to know anything about webpack. The Angular CLI hides all that webpack complexity. However, that simplicity comes at the price of flexibility. By using the Angular CLI you lose the ability to configure and customize webpack.



webpack is a static module bundler for modern JavaScript applications

In webpack you configure the following:

• Entry: the module where webpack should start
• Output: where webpack emits the bundles it creates
• Loaders: enable webpack to process more than just JavaScript files
• Plugins: perform a wide range of tasks like minification, for example

You set all these up in the webpack configuration file which is typically named: webpack.config.js

So Where is the webpack.config.js?

“But wait Todd, I just searched my entire Angular project and there is no webpack.config.js. Are you sure Angular CLI still uses webpack?”
OK, you’re right, there is no webpack.config.js in our Angular project. And, some healthy skepticism is a good thing. But, let’s take a quick look and verify that Angular does in fact depend on webpack.
In our project we can find a local copy of the Angular CLI here: node_modules\@angular\cli
In that directory you should see the package.json file for Angular CLI. Open it and take a look at the dependencies and among others you will see webpack, webpack-dev-server, etc. For example:

Also, in node_modules you can see that these webpack based dependencies actually did get installed. For example: node_modules/webpack
So, we see that Angular CLI is, in fact, using webpack but it is only a black box to us. This is great if you aren’t a webpack expert. But, if you have taken the time to level-up your webpack skills, this might be unacceptable to you. Fear not, the Angular CLI has a solution for us.

NPM and Yarn

These two technologies solve the exact same problem. To be more concrete, Yarn is a superset of NPM that solves many problems that NPM has. So what are these for?

NPM stands for Node Package Manager. It is what its name describes. It is a package manager for Node based environments. It keeps track of all the packages and their versions and allows the developer to easily update or remove these dependencies.

Babel

As any language, Javascript also has versions named ECMAScript (short for ES). Currently, most browsers support ES5. ES5 used to be good even though it was painful to code in it. Remember, this not reading from inside callback functions? The new version of Javascript, ES6, also known as ES2015 (specs of the language were finalized in June 2015) makes Javascript great again. If you want to learn about ES6, check out the links at the end of this article. All the great features of ES6 come with one big problem — majority of browsers do not fully support them. That’s when Babel comes to play. Babel is a JS transpiler that converts new JS code into old ones. It is a very flexible tool in terms of transpiling. One can easily add presets such as es2015, es2016, es2017, so that Babel compiles them to ES5.

Webpack

Now that we know what Babel and ES6/7 are, we would like to use that. We would also like to use SASS for our styles, PostCSS for autoprefixing. Plus, we would like to minify and uglify both our CSS and Javascript code. Webpack solves all of these problems using one config file (named webpack.config.js) and one CLI command webpack.

Webpack is a modular build tool that has two sets of functionality — Loaders and Plugins. Loaders transform the source code of a module. For example, style-loader adds CSS to DOM using style tags. sass-loader compiles SASS files to CSS. babel-loader transpiles JS code given the presets. Plugins are the core of Webpack. They can do things that loaders can’t. For example, there is a plugin called UglifyJS that minifies and uglifies the output of webpack.

Ref:

1. https://hackernoon.com/webpack-for-angular-developers-c8584a60e627
2. https://www.quora.com/What-is-Angular-CLI
3. https://medium.com/front-end-weekly/what-are-npm-yarn-babel-and-webpack-and-how-to-properly-use-them-d835a758f987
4.