webpack 是一个模块打包器。它的主要目标是将 javascript文件打包在一起,打包后的文件用于在浏览器中使用,但它也能够胜任转换(transform)、打包(bundle)或包裹(package)，本文主要和大家分享webpack 的一些经验，希望能帮助到大家。
缓存
生成文件名 [name].[contenthash:8].js，结合 max-age + cdn 做缓存。
网页加载
html
以前是固定的一个 html， html -》版本号 js 文件（通过webpack打出来的）-》通过版本号确定具体 js。（现在想想不太合理，虽然没和后台耦合这么重）
现在是变动的 html，通过 HtmlWebpackPlugin 打出来（webpack 生成，里面包含版本号的 js）
这样还省了一个串行时间（拉版本号文件）。 同时也便于做灰度，比如发布了需求，让一部分用户先体验，动态打出 html 给到后台即可。（固定 html 则没这么轻松做）
css分离
在观麦，css变动会非常的少，这得益于 react-gm 对类名的完善。 既然变动少，把 css 单独出来也不错，使用 ExtractTextPlugin 分离 css。
分离后减少 js 大小，不阻塞 js，同时 css 和 js 可同时拉取。
common
new CommonsChunkPlugin({name: 'commons'})看打包后的 common 代码，会发现其他模块的id和hash都会打在common中，这样每次 commons 文件都会变，就很难做缓存了。
提供两个文件列表即可，会发现 webpack 吧 id 和 hash 打在 manifest 文件中。这样commons就可以缓存了。btw，没看到官网有介绍，看到的说声。
new CommonsChunkPlugin({names: ['commons', 'manifest']})本地开发
讲讲代理，本地开始是自己起的服务，没有后台服务，自然需要代理到某个地方。 可通过 devServer.proxy 。也可代理到外网排查 bug，都是源码，查 bug 非常快。
"proxy": {
"/ticket/*": {
"target": "http://dev.guanmai.cn:7413",
"changeOrigin": true
}
}打包速度
DllPlugin
当项目大了后，必然需要打很多包，导致打包时间非常长。 官方推荐做法是把不常变动的文件打DLL。
我们工程就把 react react-dom prop-types classnames mobx mobx-react lodash moment big.js 等打进来。
网上资料都介绍 dll 的 文件名是 [name]_[hash].dll.js, 我们是 [npm version]_dll.js npm version 是 package.json version 读进来的。
为什么不用 hash 而是 npm version？我们在思考二次打包的时候遇到了问题，怎么判断 dll 是否需要重新打包？如果是 hash 怎么搞（求推荐方案）。用 npm version 的话只要 version 一改变我们会重新打包，比如升级了 react ，我们就会 version +，就会重新打包。
happypack
happypack 对 build 的速度大大大提示，可以多线程打包，cache 也让 rebuild 加快。
BJXShop网上购物系统是一个高效、稳定、安全的电子商店销售平台，经过近三年市场的考验，在中国网购系统中属领先水平；完善的订单管理、销售统计系统；网站模版可DIY、亦可导入导出；会员、商品种类和价格均实现无限等级；管理员权限可细分；整合了多种在线支付接口；强有力搜索引擎支持... 程序更新：此版本是伴江行官方商业版程序，已经终止销售，现于免费给大家使用。比其以前的免费版功能增加了：1，整合了论坛
devtool
开发用 eval，生产用 source-map（用于排查显示问题，牺牲了打包速度，在可接受范围内）
babel-loader
记得 cacheDirectory
noParse && alias
有些库不需要解析的，noParse 配置不解析，同时 alias 指向 x.min.js 文件。
tree shaking
没有用上，感觉还不是时候。有篇文章不错 你的Tree-Shaking并没有什么卵用
压缩
UglifyJsPlugin
一开始用的是 webpack.optimize.UglifyJsPlugin，那时 1.x 版本，webpack 基于 uglify-js@2.x。
现在 webpack 单独出来了, 也多了很多功能，支持 cache ，支持多核压缩，我试用了下速度还是挺快的。webpack.optimize.UglifyJsPlugin 实际上是 uglifyjs-webpack-plugin。
令我奇怪的是官方说基于 uglify-es 。可我看依赖还是 uglify-js。奇怪。
UglifyJsParallelPlugin
在官方没出来前用的是 webpack-uglify-parallel , 支持多核。速度和 uglifyjs-webpack-plugin 差不了多少。
写文章是翻了下 github，发现7月份的时候开始废弃了，集成到官方了。
其他
babel 出的 babel-minify-webpack-plugin，保持观望。
脚本cdn
有些 js(gm-fetch babel-polyfill) 实在是非常少非常少变动，用 webpack 打包有点浪费，可以通过 cdn 获取，script 形式放入 html 文档内。
分析
有图表，非常直观的分析。我比较喜欢。
webpack-monitor
老牌的是 webpack-bundle-analyzer
相关推荐：
