angular+webpack（二）

时间 2019-11-20

标签 angular+webpack angular webpack 栏目 AngularJS 繁體版

原文原文链接

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

package.json加入script
webpack.config.js
webpack配置完成 app.bundle.js
webpack-dev-server
完整代码 -> 传送门

环境

须要说明，本教程仅是Windows的实操，Linux，Mac环境，会有不一样。html

Windows 10 64位
gitBash version 2.9.0.windows.1
NodeJs version 6.8.0
npm version 3.10.8
IntelliJ IDEA 15

效果展现

ng2-starter-overview.png

实操

在实操以前，请先仔细阅读 Angular2开发基础之TSC编译
ng-starter-webpack进行到如今，可使用 tsc命令来编译ng2项目 $(npm bin)/tsc --rootDir src --outDir distjava

每次都敲上述命令，确定不是聪明的选择，须要加入到package.json中完成脚本的编写。node

step 1 : scripts

@package.json 中添加以下脚本，注意，你能够取 build 为你想要的字符串。webpack

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

而后再终端执行：git

npm run build

Look, dist出现，内容跟以前一致。github

为了让其余小伙伴download代码后，能直接使用 npm install，把typings相关的也能够自动download，须要小小修改下package.json 中的 scriptsweb

"postinstall": "typings install",

删除dist, node_moudles, typings 后，使用 npm install，就能下载全部相关依赖库以及文件了。docker

step 2: 添加Webpack

Webpack 简单的说，就是能够混合src中全部的ts源文件，而且仅仅生成一个bundle.js文件，还能够进行对生成的js文件混淆。typescript

建议安装全局 -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

webpack编译结果

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

F12-error

这个是由于加载script位置有问题，应该刚在<body>底部标签的上面。

... ...
<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>标签, 可不是copy，或者添加进入的，是自动生成的。Nice！！！

<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

webpack-p-01.png

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

1. 二二二
2. Vue基础6天实施笔记
3. 二十二
4. CSS(二十二)
5. 二周二次课
6. Matlab：二维图（二）
7. 二十二反射
8. 打卡二十二
9. jQuery EasyUI(二十二)
10. Java基本语法二二二
更多相关文章...
• Hibernate的二级缓存 - Hibernate教程
• MySQL BIT、BINARY、VARBINARY、BLOB（二进制类型） - MySQL教程
• RxJava操作符（二）Transforming Observables
• Kotlin学习（二）基本类型