Angular+webpack (b)

The previous article Angular2 the development of the TSC compiler to solve how to use the TSC to compile the NG2 project and how to resolve the error that occurred. These points are easily overlooked by novices, and they need to be familiar with the tool chain developed by NG.
This article is its sister article, the small goal is:

• Package.json Join Script
• Webpack.config.js
• Webpack Configuration Complete App.bundle.js
• Webpack-dev-server
  Complete code, Portal

Environment

It is necessary to note that this tutorial is only for Windows real-world, LINUX,MAC environment, will be different.

• Windows 10 64-bit
• Gitbash version 2.9.0.windows.1
• NodeJs version 6.8.0
• NPM version 3.10.8
• IntelliJ Idea 15

Effect Show
Ng2-starter-overview.png Real Exercise

Before you do this, please read the TSC compilation of the Angular2 Development Foundation carefully first
ng-starter-webpackTo the present, you can use the TSC command to compile the NG2 project$(npm bin)/tsc --rootDir src --outDir dist

Every time you knock the above command, it's definitely not a smart choice, you need to add to the package.json script to complete the writing.

Step 1:scripts

Add the following script to the @package. JSON, and note that you can take build the string you want.

"scripts": {    "build": "tsc --rootDir src --outDir dist"  },

Then the terminal executes:

run build

Look, dist appear, the content is consistent with the previous.

In order to let other small partners download code, can be used directly npm install , the typings related can also be automatically download, need a small change under package.json the scripts

"postinstall": "typings install",

Remove Dist, node_moudles, typings, and use it to npm install download all dependent libraries and files.

Step 2: Add Webpack

Webpack simply, it is possible to mix all of the TS source files in SRC, and only generate a Bundle.js file, and can also be confused with the generated JS file.

It is recommended to install global-G, which is only installed in the root directory

npm install --save-dev webpack

At the same time, you also need to install the relevant loader, see Webpack documentation, know, Webpack originally only support JS, if you need to support other files such as Ts,json format, you need to use the relevant loader.

npm install --save-dev ts-loader

Step 3:webpack.config.js

For better use webpack , you need webpack.config.js to use to configure Webpack. Create a new Webpack.config.js file.

var webpack = require(‘webpack‘);module.exports = {    entry: ‘./src/main.ts‘, output: { path: ‘./dist‘, filename: ‘app.bundle.js‘ }, module: { loaders: [ { test: /\.ts$/, loader: ‘ts-loader‘ } ] }, resolve: { extensions: [‘‘, ‘.js‘, ‘.ts‘] },};

The above content expresses 2 meanings: 1. Where to come from and where to go? 2. With you, who? 3. How to handle extensions
How to Understand:

• Entry indicates which TS, main.ts, compile-completed target file, output specifies
• Loaders represents what files need to be load compiled,. ts$ files, which loader:ts-loader to use
• Resolve represents the extension of the generated file, as well as the compiled file name extension, etc.

Complete the above and execute

--progress

View Dist directory, only one file app.bundle.js and the file is large, 1.53M

Webpack Compile result step4: Run test

The above configuration webpack, need to test, and so on for a long time.
@index. html Add app.bundle.js Script

<title>Angular 2 starter webpack</title><script src="../dist/app.bundle.js"></script>

Then perform, debug find, Error:

is required when using class decorators

This is because Webpack does not contain any reflect-metadata JS code even though these library files have added dependencies in Package.json. Therefore, you need to force the addition of these library files in Main.ts, including:

• Reflect-metadata
• Rxjs
• Zone.js

import ‘core-js‘;import ‘reflect-metadata‘;import ‘zone.js/dist/zone‘;... ...

Run again, $(npm bin)/webpack --progress get a new bundle.js, and be a little bigger than before.
View browser, discover or loading ...
Debug found, or error, but this time the hint can not findmy-app

F12-error

This is because there is a problem loading the script location, it should be just above the <body> bottom label.

... ...<my-app>Loading...</my-app><script src="../dist/app.bundle.js"></script>

Run the browser, OK, Perfect ~ My App appeared!

Step 5: Re-Modify scripts

Note that the compiler just used a long command: $(npm bin)/webpack --progress , can be used as before to npm run build run Webpack--progress directly, yes!
Modified Package.json-Scripts

"build": "tsc --rootDir src --outDir dist",

"build": "webpack --progress",

Step 6:html-webpack-plugin

Dist Directory Generation index.html
Note that index.html is in the SRC directory, and the generated JS is in dist, Webpack can npm run build generate index.html in execution, and embed the corresponding app.bundle.js into the index.html file.

npm install --save-dev html-webpack-plugin

@ Full Webpack.config.js

var webpack = require ( ' Webpack ') ; var htmlwebpackplugin = require ( ' Html-webpack-plugin '); module.exports = {entry:  './src/main.ts ', Output: {path:  ' app.bundle.js '},  Module: {loaders: [{test: /\.ts$/, loader:  ' Ts-loader '}]}, Resol ve: {extensions: [ '. js ',  '. ts '} , plugins: [new htmlwebpackplugin ({Template: /src/ Index.html '}]};               

At the same time, you can delete the script import statement in src/index.html

<script src="../dist/app.bundle.js"></script>

Run again npm run build , the miracle happened, there is a index.html in the dist, and there is a <script> tag in the file, not copy, or add entry, is automatically generated. nice!!!

<script type="text/javascript" src="app.bundle.js"></script></body>

Step 7:app.bundle.js Body Slimming

To achieve app.bundle.js slimming, you need to add some magic to the package.

"build:prod": "webpack -p --progress",

run build:prod

Half the size, only 651KB.

Webpack-p-01.pngstep 8:webpack-dev-server

In development, how to do the compilation, run, refresh the page without having to modify the code every time? Recommended Usewebpack-dev-server

npm install --save-dev webpack-dev-server

@package. JSON-Scripts

"server": "webpack-dev-server --line --progress"

run server

You can see the effect in the browser input, http://localhost:8080/ and when the file is modified, the server automatically compiles and refreshes the page. nice! nice! nice!

Summary:
Basic Webpack use here to end, need to see the code of the classmate, please visit my ng2-started-webpack

Angular+webpack (b)