What are webpacks in angular

What are web packs.

 

Webpack is considered to be the powerful module bundler. The bundle is nothing that is a javascript file that gets incorporated assets that belong together and is served to the client in response to the single request. The bundle can be anything javascript, CSS styles, HTML or any kind of file.

It wanders over our applications source code and looks for import statements, building a dependency graph, and emit one or more bundles. With the help of plugins and rules, the web pack has the capability of preprocessing and minifying non-javascript files like typescript, SASS. We determine that what web pack does and how it does with the javascript configuration file, webpack.config.js

 

Entries and outputs

 

We provide a web pack with one or more than one entry files and find and incorporates dependencies that radiates from those entries. One entry point file in the below example is the application's root file, src/main.ts:

entry: {

  'app': './src/main.ts'

},

 

Webpack then inspects and traverses its respective import dependencies recursively

import { Component } from '@angular/core';

 

@Component({

  selector: 'my-app',

  templateUrl: './app.component.html',

  styleUrls: ['./app.component.css']

})

export class AppComponent { }

 

As we can see that we are importing @angular/core so we are adding it this is how the web pack is made in an angular framework. After this brief explanation about the web pack, we can create our web packs for the applicationsependency list for potential inclusion in the bundle. It simply just open the @angular/core file and follows the network of imports statement until and unless it has built a complete dependency graph from main.ts down. After that, it simply outputs those files to app.js. bundle file that is designated in the configuration

output: {

  filename: 'app.js'

}

 

 

The app.js output bundle is just a single javascript file that will be containing the application source and all its dependencies. We load it later with a tag name script in the index.HTML

 

Loaders

 

These web packs can bundle any kind of files like javascript, typescript, CSS, SaaS, HTML etc. It only understands these javascript files and teaches the non-javascript files to transform to their javascript equivalent with help of loaders. To configure these loaders for typescript and CSS as following the below code.

 

rules: [

  {

    test: /\.ts$/,

    loader: 'awesome-typescript-loader'

  },

  {

    test: /\.css$/,

    loaders: 'style-loader!css-loader'

  }

]

 

 

Whenever a web pack encounters an import statement just as following, it simply applies test RegEx patterns.

 

import { AppComponent } from './app.component.ts';

 

import 'uiframework/dist/uiframework.css';

 

When any patterns match the filename, It processes the file with the associated loader. The first import file matches with .ts file pattern so it processes it with an awesome-typescript-loader if the second file does not match the pattern its loader gets ignored.

 

Plugins

 

This web pack has a built-in pipeline with well-defined phases. Simply tap pipeline with the plugins like uglify minification plugin:

 

plugins: [

  new webpack.optimize.UglifyJsPlugin()

]

 

Configuring web pack

After a brief explanation, now we can be built our web pack for angular apps. Create a new project with the following commands

 

MKDIR angular-web pack

cd angular-web pack

 

Add the following 

 

{

  "name": "angular2-webpack",

  "version": "1.0.0",

  "description": "A webpack starter for Angular",

  "scripts": {

    "start": "webpack-dev-server --inline --progress --port 8080",

    "test": "karma start",

  },

  "license": "MIT",

  "dependencies": {

    "@angular/common": "~2.4.0",

    "@angular/compiler": "~2.4.0",

    "@angular/core": "~2.4.0",

    "@angular/forms": "~2.4.0",

    "@angular/http": "~2.4.0",

    "@angular/platform-browser": "~2.4.0",

    "@angular/platform-browser-dynamic": "~2.4.0",

    "@angular/router": "~3.4.0",

    "core-js": "^2.4.1",

    "rxjs": "5.0.1",

    "zone.js": "^0.7.4"

  },

  "devDependencies": {

    "@types/node": "^6.0.45",

    "@types/jasmine": "2.5.36",

    "angular2-template-loader": "^0.6.0",

    "awesome-typescript-loader": "^3.0.4",

    "css-loader": "^0.26.1",

    "extract-text-webpack-plugin": "2.0.0-beta.5",

    "file-loader": "^0.9.0",

    "html-loader": "^0.4.3",

    "html-webpack-plugin": "^2.16.1",

    "jasmine-core": "^2.4.1",

    "karma": "^1.2.0",

    "karma-chrome-launcher": "^2.0.0",

    "karma-jasmine": "^1.0.2",

    "karma-sourcemap-loader": "^0.3.7",

    "karma-webpack": "^2.0.1",

    "null-loader": "^0.1.1",

    "raw-loader": "^0.5.1",

    "rimraf": "^2.5.2",

    "style-loader": "^0.13.1",

    "typescript": "~2.0.10",

    "webpack": "2.2.1",

    "webpack-dev-server": "2.4.1",

    "webpack-merge": "^3.0.0"

  }

}

 

This is how the web pack is made in an angular framework. After this brief explanation about the web pack, we can create our web packs for applications