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 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位置有问题,应该刚在<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 ...
随机推荐
- Unity图集打包
http://www.xuanyusong.com/archives/3304 http://www.xuanyusong.com/archives/3315 http://www.xuanyuson ...
- docker应用-5(使用overlay 网络进行容器间跨物理主机通信)
同一个主机上的Docker容器之间通信 docker 引擎会在主机上增加一个docker0网卡,该网卡具有双重身份: 1.从容器视角,网桥(交换机)身份docker0 对于运行在同一个主机上的各个容器 ...
- jquery实现同时展示多个tab标签+左右箭头实现来回滚动(美化版增加删除按钮)
闲聊 前段时间小颖分享了:jquery实现同时展示多个tab标签+左右箭头实现来回滚动文章,引入项目后,我们的组长说样子太丑了,小颖觉得还好啊,要不大家评评理,看下丑不丑?无图无真相,来上图: 看吧其 ...
- nw.js---创建一个hello word的方法
一.如果用nw.js 来开发桌面应用 首先到Nw.js中文网下载软件: https://nwjs.org.cn/download.html 下载下来进行解压就可以了,绿色的免安装的,整个目录结果是这样 ...
- Python读取一个目录下的所有文件
#!/usr/bin/python # -*- coding:utf8 -*- import os allFileNum = 0 def printPath(level, path): global ...
- R - Dividing 多重背包
来源poj1059 Marsha and Bill own a collection of marbles. They want to split the collection among thems ...
- R 540
好久没写题解了嘻嘻嘻,昨天补edu自闭了一天还没补完fg这div3令人愉悦. A: #include <bits/stdc++.h> #define mk(a,b) make_pair(a ...
- ora-01017 和oracle database link
DB link ,创建完了后总是报密码错误.我感到奇怪.明明密码是对的.怎么可能错误呢. SQL> create public database link kk40 connect to khf ...
- SpringBoot--web版的ocr
这个项目主要是为了熟悉SpringBoot搭建web项目,及打war包,部署到tomcat中 先贴页面吧 页面很low 毕竟我只是菜鸟,该app程序功能已经写完了,上传图片到服务器,后台接口解析图片中 ...
- python全栈开发 * 35 知识点汇总 * 180720
35 socket 一些常用方法 验证客户端信息 添加随机字符串 socketserver模块 一.socket模块中一些常用方法1.send和sendall的区别2.conn.getpeername ...