Angular2开发基础之Webpack

本文首发简书http://www.jianshu.com/p/4b4264f045b7, 欢迎转载，但请注明转载链接，谢谢！

目标

上篇文章Angular2开发基础之TSC编译 解决如何使用TSC来编译ng2项目，以及如何解决出现的error。这些点是新手容易忽视的内容， 要熟悉ng开发的工具链，还是需要掌握其中的重点。

本篇文章是它的姊妹篇，小目标是：

- package.json加入script

- webpack.config.js

- webpack配置完成 app.bundle.js

- webpack-dev-server

完整代码 -> 传送门

环境

需要说明，本教程仅是Windows的实操，Linux，Mac环境，会有不同。

- Windows 10 64位

- gitBash version 2.9.0.windows.1

- NodeJs version 6.8.0

- npm version 3.10.8

- IntelliJ IDEA 15

效果展示

实操

在实操之前，请先仔细阅读 Angular2开发基础之TSC编译

ng-starter-webpack

进行到现在，可以使用 tsc命令来编译ng2项目

$(npm bin)/tsc --rootDir src --outDir dist

每次都敲上述命令，肯定不是聪明的选择，需要加入到

package.json

中完成脚本的编写。

step 1 : scripts

@package.json 中添加如下脚本， 注意， 你可以取

build

为你想要的字符串。

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

然后再终端执行：

npm run build

Look,

dist

出现，内容跟之前一致。

为了让其他小伙伴download代码后，能直接使用

npm install

， 把typings相关的也可以自动download，需要小小修改下

package.json

中的 scripts

"postinstall": "typings install",

删除dist, node_moudles, typings 后，使用

npm install

，就能下载所有相关依赖库以及文件了。

step 2: 添加Webpack

Webpack 简单的说，就是可以混合src中所有的ts源文件，并且仅仅生成一个bundle.js文件， 还可以进行对生成的js文件混淆。

建议安装全局 -g，这里仅仅安装在根目录

npm install --save-dev webpack

同时，还需要安装 相关loader， 参看 webpack文档，知道，webpack原本仅支持js， 如果需要支持其他如ts，json格式的文件，就需要使用相关的 loader。

npm install --save-dev ts-loader

step 3: webpack.config.js

为了更好的使用

webpack

，需要使用

webpack.config.js

来配置webpack。新建webpack.config.js文件。

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']
},
};

以上内容表达2个意思： * 1. 从哪里来， 到哪里去 ? 2. 跟你一起，有谁？ 3.如何处理扩展名 *

如何理解：

- entry表示入口是哪个ts， main.ts， 编译完成的目标文件， output指定

- loaders表示需要load哪些文件进行编译， .ts$文件， 使用哪个loader： ts-loader

- resolve 表示生成的文件的扩展名，以及编译的文件扩展名等

完成以上，执行

$(npm bin)/webpack --progress

查看 dist目录，只有一个文件app.bundle.js 而且文件很大， 1.53M

step4: 运行测试

以上配置好了webpack， 需要进行测试了，等这一刻好久了。

@index.html 添加 app.bundle.js script

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

然后执行，调试发现，出现error：

Uncaught reflect-metadata shim is required when using class decorators

这是因为webpack不包含任何

reflect-metadata

js code 即使这些库文件在package.json中添加了依赖。 所以，需要强制在main.ts中添加这些库文件，包括：

- reflect-metadata

- rxjs

- zone.js

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

再次运行，

$(npm bin)/webpack  --progress

得到新的 bundle.js, 而且比之前大了一些。

查看浏览器， 发现还是Loading…

调试发现，还是error，不过这次提示 找不到

my-app

这个是因为 加载script位置有问题，应该刚在底部标签的上面。

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

运行浏览器，OK， 完美~

My App

出现了!

step 5: 再修改scripts

注意，刚才编译使用的是长命令：

$(npm bin)/webpack --progress

， 能否像之前使用

npm run build

那样 就直接运行 webpack –progress, 可以！

修改package.json -> scripts

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

"build": "webpack --progress",

step 6: html-webpack-plugin

dist目录生成index.html

注意， index.html是在src目录中，而生成的js是在dist中，webpack能否在执行

npm run build

中生成index.html，并且将 对应的app.bundle.js嵌入到index.html文件中。

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

@完整 webpack.config.js

var webpack = require('webpack');
var HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {

entry: './src/main.ts',
output: {
path: './dist',
filename: 'app.bundle.js'
},
module: {
loaders: [
{
test: /\.ts$/,
loader: 'ts-loader'
}
]
},
resolve: {
extensions: ['', '.js', '.ts']
},
plugins: [
new HtmlWebpackPlugin({
template: './src/index.html'
})
]
};

同时，可以删除掉src/index.html 中的 script导入语句

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

再次运行

npm run build

, 奇迹发生了，dist中存在了index.html, 并且文件中存在 了

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

step 7 ： app.bundle.js 瘦身

要实现app.bundle.js瘦身，需要在package中添加某些Magic。

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

npm run build:prod

大小减半了，只有651KB

step 8: webpack-dev-server

在开发中，如何不用每次修改代码后，重复执行编译，运行，刷新页面呢？ 推荐使用

webpack-dev-server

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

@package.json -> scripts

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

npm run server

在浏览器输入

http://localhost:8080/

就可以看到效果， 而且，当修改文件时候，server自动编译 刷新页面。Nice! Nice! Nice！

小结：

基本的webpack使用到这里就完结了，需要参看代码的同学，请访问我的 ng2-started-webpack