最近，在开发公司项目的时候，由于组件太多，发出请求太多，导致网站速度太慢，所以我们就有一种强烈的需求，那就是对开发的js进行打包。在对比了各种打包工具之后，最后我们选定了webpack。所以，在这一周除了研究了下如何跨域请求，最主要的时间都去研究webpack去了，虽然没有达到理想中的状态，但是基本的需求应该算是满足了，现在分享出来，希望对大家学习Angular有所帮助。
在正文之前，我先说下，我要分享的内容有：
· webpack在Angular中使用
· 建立开发环境与生产环境
· 优化打包性能，将第三方库与开发的代码分离
· 对代码进行压缩
· 一些第三方框架的集成
· webpack解决缓存问题，上线后自动使用最新的js文件
首先，克隆demo项目，并安装依赖
git clone https://github.com/liuchungui/angularWebpackDemo.gitcd angularWebpackDemo
git checkout -f step0
npm install
然后，编写webpack配置文件
创建webpack.config.js文件，并且编写如下内容：
const webpack = require("webpack");
module.exports = {
//入口文件
entry: "./demoApp.js",
//生成的文件配置
output: {
//生成文件的路径,__dirname是当前项目路径,与webpack.config.js同级
path: __dirname,
//文件名
filename: "bundle.js"
},
module: {
//将css文件打包进去
loaders: [
{ test: /\.css$/, loader: "style!css" }
]
},
plugins: [
/**
* 此插件会自动加载jquery,解决jquery无法引用的问题
*/
new webpack.ProvidePlugin({
$: "jquery",
jQuery: "jquery"
})
]
};
上面用到的配置选项大概说一下：
· entry：入口文件，可以传字符串，那说明入口文件只有一个；也可以传数组或对象，指定多个入口文件
· output: 生成打包文件的配置，可以指定path（路径），当有多个入口文件时，还可以使用[name]、[hash]、[chunkhash]等值，来对应替换为入口的文件的配置 。
· loaders: 它可以转换项目中的资源文件，例如，上面就是css样式文件转换为style标签插入到html当中。
· plugins: 插件，它可以干很多很多的事情，非常强大，官方提供了很多插件，第三方也可以写插件。上面的 ProvidePlugin 插件的作用是自动加载jquery模块，也就是说将jquery变成了全局的模块，当然我们需要在index.html中使用script标签导入。
随后，导入使用
首先，我们在 index.html 中导入 bundle.js ：
<script src="bundle.js">script>
然后，我们不需要在index.html中导入js文件了，只需要使用 require 导入模块就行，webpack会自己解决它们之间的依赖。例如，我们在demo项目中的demoApp.js中导入 angular 和 bootstrap 。
’use strict’;require("angular");require("bootstrap");
var demoApp = angular.module(’demoApp’, []);
当然，上面的require(“angular”)导入的是 node_modules 中的angular模块，如果我们要导入本地的js文件，怎么办？如下：
require("./test");
这种方式还有一个用法，那就是我们可以将共用的第三方库、组件写入一个文件中，然后其它文件只需要导入这个文件一次就行了。
例如，上面我们可以建立一个 common.js 文件，然后导入 angular 和 bootstrap，common.js内容如下：
require("angular");require("bootstrap");
然后在 demoApp.js 中使用：
’use strict’;require(’./common’);
var demoApp = angular.module(’demoApp’, []);
效果是一样的，但这种方式解决了非常的棒，解决了我曾经的一个痛点，那就是我们项目分角色有很多个端，每个端有共同的内容，当写一个组件时，我们需要每个端都在index.html中导入一遍，非常的不方便。
注：由于jquery没有模块化的概念，也没有适配webpack，所以我们使用jquery时，需要在index.html中导入，然后使用 ProvidePlugin 插件使其自动加载。
最后，打包运行
打包只需要在项目根目录下运行：
webpack --progress --color
它默认会使用当前目录下的 webpack.config.js 配置文件，运行成功之后，它会生成一个 bundle.js 打包文件。
我们可以在浏览器访问，就可以看到效果，这就说明OK了。
当然，我们开发时，需要实时看到改变代码的效果，这个时候每次都打包生成就太麻烦了。那么就可以用到webpack专门为我们准备的调试命令：
webpack-dev-server
然后在浏览器中输入 http://localhost:8080/ 就可以看到效果了。
其实，除了这种，还有另外一种也可以进行调试，那就是监听模式：
webpack --progress --color --watch
监听模式下，我们的js文件发生改变时，它会监听到，然后重新打包。
另外，多个客户端，配置多个入口文件
在我们公司项目中，有很多个客户端，我把它们配置成了多个入口文件，那么如何配置多个入口文件？如下：
const webpack = require("webpack");
module.exports = {
//入口文件
entry: {
demoApp: "./demoApp.js",
vendor: "./vendor.js"
},
//生成的文件配置
output: {
//生成文件的路径,__dirname是当前项目路径,与webpack.config.js同级
path: __dirname,
//文件名
filename: "[name].bundle.js"
}
};
它们将生成 demoApp.bundle.js 和 vendor.bundle.js 两个打包文件。
查看最终效果
如果想查看demo的最终效果，如下运行命令：
git checkout -f step1
npm install
webpack --progress --color
总结
刚开始看了官方文档入门之后，感觉自己会用了，但是却不知道如何用在Angular上面。后来查看了别人的代码之后，发现与 react-native 类似，都是使用 require 语法使用（CommonJS语法），豁然开朗。之后，发现很多第三方框架都适配了 webpack ，唯独jquery不行，找了 stackoverflow 上面的解决方案顺利解决。就这么折腾下来，然后产生了这么一篇文章，希望对大家能有所帮助。当然，东西不止这么点，后续再更新出来。而且，我也会继续，直到整个webpack配置达到我理想中的状态。
来源：liuchungui’s Blog