上篇文章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

效果展示

ng2-starter-overview.png

实操

在实操之前，请先仔细阅读 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

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

angular+webpack（二）的更多相关文章

  1. angular服务二

    angular服务 $http 实现客户端与服务器端异步请求 get方式 test.html <!DOCTYPE html> <html lang="en"> ...

  2. Angular基础(二) 组件的使用

    ​ 一.简单操作 a) 使用Angular CLI可以快速创建项目框架,先运行 $ npm install –g @angular/cli@1.0.0安装CLI,为CLI的位置设置环境变量,然后就可以 ...

  3. webpack(二） 根据模板生成简单的html文件

    (一)使用webpack 根据模板生成HTML,首先需要安装插件 html-webpack-plugin. 在工程文件夹安装插件 命令如下: npm install html-webpack-plug ...

  4. 六、angular 生成二维码

    首先需要安装angular-qrcode : bower install monospaced/angular-qrcode npm install angular-qrcode 如何使用? 在相应的 ...

  5. Angular（二）

    Angular开发者指南(二)概念概述   template(模板):带有附加标记的模板HTMLdirectives(指令):使用自定义属性和元素扩展HTMLmodel(模型):用户在视图中显示的数据 ...

  6. angular学习(二):Controller定义总结

    上文中总结完了ng-view的应用,将运维后台分开界面到2个,进行到 逻辑Controller处理中,本文将总结一下在项目中Controller都用到了哪些知识: $scope:作用域对象,仅仅是代表 ...

  7. Angular生成二维码

    Installation - Angular 5+, Ionic NPM npm install angularx-qrcode --save Yarn yarn add angularx-qrcod ...

  8. 从flask视角理解angular（二）Blueprint VS Component

    Component类似flask app下面的每个blueprint. import 'rxjs/add/operator/switchMap'; import { Component, OnInit ...

  9. Angular总结二：Angular 启动过程

    要弄清楚 Angular 的启动过程,就要弄明白 Angular 启动时加载了哪个页面,加载了哪些脚本,这些脚本做了哪些事? 通过 Angular 的编译依赖文件 .angular-cli.json ...

随机推荐

  1. Windows系统配置.bat启动spring boot项目jar

    背景:项目用spring boot构建,maven管理,本地测试好之后打成jar包,在dos窗口可以通过:java -jar demo.jar来启动demo项目,一旦关闭该dos窗口demo项目也被停 ...

  2. MTK LCM的添加

    对于LCM驱动移植,一般分为三部曲: 1.硬件IO口配置: 2.确保LCM背光能够正常点亮: 3.LCM驱动移植: 硬件电路: 1.GPIO配置 打开 mediatek\dct\DrvGen.exe ...

  3. hibernate源码分析1

  4. [Manthan, Codefest 18][Codeforces 1037F. Maximum Reduction]

    题目链接:1037F - Maximum Reduction 题目大意:给出一段代码,给你一个长度为n的数组和数字k,求程序运行结果,mod 1e9+7输出 简单翻译下代码的意思,初始定义一个空数组b ...

  5. hibernate10--命名查询

    <?xml version="1.0"?> <!DOCTYPE hibernate-mapping PUBLIC "-//Hibernate/Hiber ...

  6. oracle 存储过程分页

    将分页的存储过程封装到包中,包规范 create or replace package pkg_query as type cur_query is ref cursor; PROCEDURE prc ...

  7. CVE-2017-8912 CMS Made Simple命令执行

    CVE-2017-8912 CMS Made Simple命令执行 1)了解命令执行漏洞,并且能够从源码中发现. 2)用eval处理函数,并且过滤不严导致命令执行. 实验步骤 1.1)登录网站 1.2 ...

  8. CentOS7.6 安装Docker

    删除已安装的Docker # Uninstall installed docker sudo yum remove docker \ docker-client \ docker-client-lat ...

  9. Coroutines declared with async/await syntax is the preferred way of writing asyncio applications. For example, the following snippet of code (requires Python 3.7+) prints “hello”, waits 1 second, and

    小结: 1.异步io  协程 Coroutines and Tasks — Python 3.7.3 documentation https://docs.python.org/3/library/a ...

  10. Mac开发工具汇总

    1: Json Parser Mac版 http://www.pc6.com/mac/180470.html