Webpack打包进阶
说在前面
由于使用了React直出，页面各项性能指标使人悦目。本篇将深入探讨目前PC部落所采用webpack打包优化策略，以及探讨PC部落并未使用的 webpack Code Splitting 代码分包、异步模块加载特性。看看它们又是如何对PC部落的性能起到进一步的催化作用。
为什么要使用webpack
如果你曾经使用过 Broserify, RequireJS 或类似的打包工具，并注重：代码分包、异步加载、静态资源打包（图片/CSS）。那么 webpack 就是帮你构建项目的利器！简单一句话：在webpack中，所有资源都被当作是模块，js可以引用 css , css 中可以嵌入图片 dataUrl。
webpack特性
对应不同文件类型的资源，webpack有对应的模块 loader ，比如对于 less， 使用的是 less-loader，你可以在这里找到 所有loader. webpack 具有requireJS 和 browserify 的功能，但仍有自己的新特性： 1、对 CommonJS、AMD、ES6的语法做了兼容； 2、对js、css、图片等资源文件都支持打包； 3、串联式模块加载器以及插件机制让其具有更好的灵活性和拓展性，例如对 coffeeScript、ES6的支持； 4、有独立的配置文件 webpack.config.js; 5、可以将代码切割成不同 chunk，实现按需加载，降低了初始化时间； 6、支持 SourceUrls 和 SourceMaps，易于调试； 7、具有强大的 Plugin 接口，大多是内部插件，使用起来比较灵活； 8、webpack 使用异步 IO 并具有多级缓存，使得 webpack 在增量编译上更快！
为什么混用Grunt和webpack
自React诞生以来，耳熟能详的是 React+webpack 开发大法，而且在大多数 React 网络教程中也很少提及同时采用了 Grunt 联合构建项目。
Grunt 可以对整个项目文件做复制、删除、合并、压缩等等。而Webpack 的优势在于对静态文件（js/jsx/coffeeScript/css/less/sass/iamges）按不同模块加载（包括按需加载）——这正是我们对webpack感兴趣的地方，各个模块组建化（可以将一个组建的图片、样式、脚本、页面放在同一个文件夹中）。所以，在项目中二者分工不同，各司其职。
注：使用 gulp 替换 grunt 当然也是没有问题。
webpack配置
webpack 有多种配置方式，由于PC部落中静态资源文件较多，使用配置文件进行打包会方便很多。
通常情况下，如果我们只使用 webpack 构建项目，那么配置 webpack.config.js 即可。由于在PC部落中使用了 grunt，并在 grunt 组合任务中调用 webpack 任务，因此需要在 grunt 的任务配置中添加 webpack.js（使用了load-grunt-config插件） 进行配置。
配置总览
var taskConfig = {
dev: {
entry: { // 入口文件，考虑到多页面资源缓存，我们打成多个包
"index": path.resolve(config.srcPath, "pages/index/index.jsx"),
"detail": path.resolve(config.srcPath, "pages/detail/detail.jsx"),
...
},
resolve: { // 请求重定向，显示指出依赖查找路径
alias: {
img: path.resolve(config.srcPath + 'img'),
comps: path.resolve(config.srcPath + 'pages/components')
...
}
},
output: { // 输出文件
path: config.devPath + '/js', // 文件绝对路径
filename: "[name].min.js", // 输出文件名
publicPath: "http://s.url.cn/qqun/xiaoqu/buluo/p/js/", // 公共访问路径，替换CDN
chunkFilename: "[name].chunk.min.js" // 异步加载时需要被打包的文件名
},
module: { // 各类文件 loader
noParse: [], // 忽略解析的文件
preLoaders: [{ // 预加载的模块
test: /\.jsx$/,
exclude: /node_modules/,
loader: 'jsxhint-loader'
}],
loaders: [{ // 各式加载器
test: /\.jsx$/,
loader: 'jsx-loader',
include: path.resolve(config.srcPath)
}, {
test: /\.less$/,
// 使用“！”链式loader，从右向左依次执行
loader: ExtractTextPlugin.extract("style-loader", "css-loader!less-loader"),
include: path.resolve(config.srcPath)
}, {
test: /\.(jpe?g|png|gif|svg)$/i,
// inline base64url for <=1500 images
loader: 'url-loader?limit=1500&name=images/[name].[hash].[ext]',
include: path.resolve(config.srcPath)
}]
},
externals: { // 指定采用外部 CDN 依赖的资源，不被webpack打包
"react": "React",
"react-dom": "ReactDOM"
},
plugins: [
...
// 公共模块独立打包配置
new CommonsChunkPlugin("common", "common.min.js", ["index", "detail", "barindex", "search"]),
// 独立打包css文件以外链形式加载
new ExtractTextPlugin("../css/[name].min.css")
],
watch: true,
keepalive: true,
lessLoader: {
lessPlugins: [
new LessPluginAutoPrefix()
]
}
},
webpack打包优化
1、请求重定向
resolve.alias 是webpack 的一个配置项，它的作用是把用户的一个请求重定向到另一个路径。 比如：
resolve: { // 显示指出依赖查找路径
alias: {
comps: 'src/pages/components'
}
}
这样我们在要打包的脚本中的使用 require('comps/Loading.jsx'); 其实就等价于require('src/pages/components/Loading.jsx')。这犹如《高性能javascript》中给查询压力较大的对象给了一个别名，通过使用别名可以将本例减少几乎一半的时间。
2、忽略对已知文件的解析
module.noParse，如果你确定一个模块中没有其它新的依赖，就可以配置这项，webpack 将不再扫描这个文件中的依赖。 比如我们在入口文件 entry.js 中检测到对资源src/pages/components/ueditor.min.js资源的请求，如果我们配置：
module: {
noParse: [/ueditor/]
}
noParse规则中的/ueditor/一条生效，所以 webpack 直接把依赖打包进了 entry.js。增加这样的配置会让 webpack 编译时间更短。
3、使用公用CDN
考虑到web上有很多的公用 CDN 服务，那么我们可以将 react 从 bundle 中分离出来，进而不会被 webpack 打包， 作为外部依赖引用 CDN 。 方法是使用 externals 声明一个外部依赖。 如：
module:{
externals: {
// 方式一：申明为外部依赖并指定别名
"react": "React",
"react-dom": "ReactDOM"
// 方式二：true 为外部依赖，false 则不是
a: false, // a is not external
b: true // b is external
},
}
并在 HTML 代码中加上一行
<script src="//cdn.bootcss.com/react/0.14.2/react.js">
<script src="//cdn.bootcss.com/react/0.14.2/react-dom.js">
这样我们在js中引入React = require('react') ， webpack 就不会把 react 打包进来而直接引用CDN，这样做可以让 webpack 编译时间缩减一大半！
系列插件
CommonsChunkPlugin
开发中需要将多个页面的公用模块独立打包，从而可以利用浏览器缓存机制来提高页面加载效率，减少页面初次加载时间，只有当某功能被用到时才去动态加载。这就要使用到 webpack 中的 CommonsChunkPlugin 插件。
使用：
var CommonsChunkPlugin = require("webpack/lib/optimize/CommonsChunkPlugin");
module.exports = {
...
/*
* @param 1 将公共模块提取，生成名为 common 的chunk
* @param 2 最终生成的公共模块的 js 文件名
* @param 3 公共模块提取的资源列表
*/
new CommonsChunkPlugin("common", "common.min.js", ["index", "detail", "barindex", "search"])
}
ExtractTextPlugin
webpack 中编写js文件时，可以通过 require 的方式引入其他静态资源，可通过loader对文件自动解析并打包文件。 通常我们会将 js 文件打包合并，css 文件在页面header中嵌入 style 的方式载入页面。但在开发过程中我们并不想将样式打包在脚本中（最好可以独立生成css文件，以外链形式加载）。 ExtractTextPlugin 插件可以帮我们达到这样的效果。
安装：
npm install extract-text-webpack-plugin –save-dev
使用：
var ExtractTextPlugin = require("extract-text-webpack-plugin");
module.exports = {
...
plugins: [ new ExtractTextPlugin("../css/[name].min.css") ]
}
这样配置就可以将 js 中的 css 文件提取，并以指定的文件名来进行加载。
LessPluginAutoPrefix
顾名思义，就是autoPrefix插件，用来补全CSS的厂商前缀（-webkit-, -moz-, -o-）;
使用：
var LessPluginAutoPrefix = require('less-plugin-autoprefix');
var taskConfig = {
dev: {
...
lessLoader: {
lessPlugins: [
new LessPluginAutoPrefix()
]
}
}
Code Splitting
对于一个大型的web app，我们把所有的 js 文件合成一个显然是非常低效的，因为有些 js 模块并不是我们当前页面所需要的（这会大大增加页面首屏渲染时间）。Webpack 就是这样一种神器，为您提供优质的代码分包服务，从此“妈妈再也不用担心页面按需加载的问题了”！
方式一：require
require(dependencies, callback) 遵从 AMD 规范定义的异步方法。使用该方法时，所有的依赖被异步加载并从左至右立即执行，依赖都被执行后，执行callback。
方式二：require.ensure
require.ensure(dependencies, callback) 遵从 CommonJS 规范，在需要的时候才下载依赖的模块。当所有的依赖都被加载完毕，便执行 callback（注：require作为callback的参数）。 细心的同学可能还记得 output 配置中有
output: {
...
chunkFilename: "[name].chunk.min.js"
}
chunk 到底是什么？ chunk 又是怎么生成的呢？ 为了实现部分资源的异步加载，有些资源是不打包到入口文件里面的。于是我们使用 require.ensure 作为代码分割的标识。require.ensure 会创建一个 chunk ，且可以指定该 chunk 的名称（注：如果这个chunk已经存在了，则将本次依赖的模块合并到已经存在的chunk中），最后这个 chunk 在 webpack 构建时会单独生成一个文件。 比如我们要根据当前运行平台，加载两个不同的UI组建，那么：
var platform = Util.getPlatform();
if( platform === "ios"){
require.ensure(['./components/dialog'], function(require){
...
}, 'popup'); // 最后一个参数是 chunk 名
}
if( platform === "android"){
require.ensure(["./components/toast"], function(require){
...
}, 'popup');
}
通过webpack打包之后，会生成一个 popup.chunk.min.js 文件。在不同的运行平台上，我们会发现 popup.chuck.min.js 文件的内容是相同的（因为我们配置的 chunk 名都是 popup）。 如果我们想让按需加载的模块再次拆分成 dialog 和 toast，两个文件，仅仅需要将 require.ensure 中配置的chunk 名改不同，即可在代码被执行时加载单一文件。
注意点：
1、require ：加载模块，并立即执行； 2、require.ensure：仅仅加载模块，但不会执行； 3、不用在 html 中显示调用生成的 chunk 文件，按需加载时会自动调用； 4、不用担心第三方库被反复打包的问题，因为我们已经使用 CommonsChunkPlugin 对公共部分进行提取。
