angular+webpack（二）
上篇文章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 buildLook, 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-loaderstep 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位置有问题，应该刚在<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
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
angular+webpack（二）的更多相关文章
- angular服务二
angular服务 $http 实现客户端与服务器端异步请求 get方式 test.html <!DOCTYPE html> <html lang="en"> ...
- Angular基础(二) 组件的使用
一.简单操作 a) 使用Angular CLI可以快速创建项目框架,先运行 $ npm install –g @angular/cli@1.0.0安装CLI,为CLI的位置设置环境变量,然后就可以 ...
- webpack(二） 根据模板生成简单的html文件
(一)使用webpack 根据模板生成HTML,首先需要安装插件 html-webpack-plugin. 在工程文件夹安装插件 命令如下: npm install html-webpack-plug ...
- 六、angular 生成二维码
首先需要安装angular-qrcode : bower install monospaced/angular-qrcode npm install angular-qrcode 如何使用? 在相应的 ...
- Angular（二）
Angular开发者指南(二)概念概述 template(模板):带有附加标记的模板HTMLdirectives(指令):使用自定义属性和元素扩展HTMLmodel(模型):用户在视图中显示的数据 ...
- angular学习(二):Controller定义总结
上文中总结完了ng-view的应用,将运维后台分开界面到2个,进行到 逻辑Controller处理中,本文将总结一下在项目中Controller都用到了哪些知识: $scope:作用域对象,仅仅是代表 ...
- Angular生成二维码
Installation - Angular 5+, Ionic NPM npm install angularx-qrcode --save Yarn yarn add angularx-qrcod ...
- 从flask视角理解angular（二）Blueprint VS Component
Component类似flask app下面的每个blueprint. import 'rxjs/add/operator/switchMap'; import { Component, OnInit ...
- Angular总结二：Angular 启动过程
要弄清楚 Angular 的启动过程,就要弄明白 Angular 启动时加载了哪个页面,加载了哪些脚本,这些脚本做了哪些事? 通过 Angular 的编译依赖文件 .angular-cli.json ...
随机推荐
- windows安装mongodb服务简洁版教程
根据网上安装教程,简单总结如下: 1.去mongodb官网下载电脑系统对应版本的软件,比如我的是windows 64位的,就选择64位的,可能下载下来之后文件夹上面显示的是win32,这个不用理会: ...
- 真正让HTML标签、DIV、SPAN拥有onfocus和onblur，聚焦和失焦
转载:http://blog.sina.com.cn/s/blog_7dfe67db01010lnq.html 默认火狐或者其他浏览器里DIV和其他普通标签是不具有onfocus和onblur事件的, ...
- 【Zookeeper系列】ZooKeeper伸缩性（转）
原文地址:https://www.cnblogs.com/sunddenly/p/4143306.html 一.ZooKeeper中Observer 1.1 ZooKeeper角色 经过前面的介绍,我 ...
- nginx的https和http共存反向代理配置
一.设置http反向代理: upstream ly.com { server ; server ; } upstream home.ly.com { server ; server ; } 对应增加: ...
- python nose 自写插件支持用例带进度
在自动化测试过程中,当用例很多且要跑很久时,就会出现这样一个问题,不知道当前跑到第几个用例了,还有多少用例要跑,怎么办? 因为用的nose框架,那就看看nose有没有这样的库支持,结果看了一圈,只找到 ...
- Ubuntu系统的nginx启动
在不同的linux系统中,安装nginx之后,要启动nginx,目录路径可能有一点不一样,如下是Ubuntu系统启动nginx,其他版本的linux系统可能不适用. Ubuntu安装之后的文件结构大致 ...
- 静态方法（staticmethod）和类方法（classmethod）
类方法:有个默认参数cls,并且可以直接用类名去调用,可以与类属性交互(也就是可以使用类属性) 静态方法:让类里的方法直接被类调用,就像正常调用函数一样 类方法和静态方法的相同点:都可以直接被类调用, ...
- C#winform窗体实现对sql server数据库的增删改查
1.运行效果截图 2.输入用户名,密码进行查询 查找成功则显示 查找不成功显示用户信息不存在 3.输入用户名与密码,向数据库中添加用户信息 添加后数据库表信息 4.查看全部信息 5.根据编号信息进行查 ...
- maven学习之pom.xml或settings.xml对nexus的配置（转）
(1)在POM中配置Nexus仓库 <project> ... <repositories> <repository ...
- java应用，直接请求没问题，通过nginx跳转状态吗400
今天配置金融的测试环境,直接调用java应用返回状态200,通通过nginx跳转,会返回400,真是一头雾水..... 参考文档: https://www.cnblogs.com/yanghj010/ ...