背景
Webpack 已经随着 react 火了一段时间，不得不说前端的变化十分的快。每年都有新东西出来，Webpack 还没有玩热，又来了一个rollup，号称是下一代的打包工具。对前端来说，一涉及到性能，开发方式，打包就是一个回避不了的问题，在前端还没有这么百花齐放的过去也是这样。最早的时候用各种后台语言写的 combo 合并工具，后来是 ant，还有 Google closure compiler，再后来node 开始发展起来，随后伴随着node 的生态圈 Grunt Gulp 国内的 Fis 都开始流行起来。来到如今已经是一个百花齐放百家争鸣的好时代，任何优秀的工具都可以流行起来。早在前端 Bigpipe 技术被提出的时候，模块化开发的雏形就已经奠定，后来代码组织方式从早期的命名空间，到后来Commonjs规范，AMD 规范，以及国内的 CMD 规范都是为了解决代码如何模块化开发的问题。ES6规范的发布给了前端模块化开发先天的支持，意味着前端模块化开发可以通过各种辅助工具进入到下一个时代。
早在Webpack 刚刚发布我就尝试了一下，当时几乎没有中文资料，偶尔国内 React社区 能翻到一下开荒的文章，自己花费了一些时间跑起来，但是很快也就被自己抛到脑后还是继续使用gulp。现在回想起来很大原因还是开发方式的问题，当时还没有使用 Babel 和 ES6, 也没有在代码中时刻 import 的习惯。所以可见每个工具其实是和开发方式和代码组织密切分不开的，近来模块化大行其道，各种前端MVVM 框架层出不穷，Webpack 已经成为项目工程化的标配。最近也开始在项目中使用Vue + Vuex + ES6 + Webpack 真实感受到了webpack 的各种便利。
Webpack Introduction
官方的介绍是 MODULE BUNDLER (模块打包器), 就是一个打包工具。从官方的定义来看似乎很纯粹，就是一个打包工具其他的事情Webpack不管，但实际上通过Webpack可以
模块打包
webpack 会从入口开始去分析你的模块依赖从而把你的代码合并在一起生成一个文件，或是多个。
模块化开发
webpack 视万物为模块，无论是 js 还是 css 还是 图片，字体，以及其他资源，Webpack 都可以使用的简单的一句import 或是require 就可以让你在项目中使用你的引入的资源
处理资源
webpack 使用各种loader 来处理资源，常见的loader比如 style-loader, css-loader, less-loader, bable-loader, url-loader 框架相关的loader比如：jsx-loader, vue-loader
压缩，混淆 es6, js
使用bable-loader 来转换 es6 的语法
可以使用 eslint-loader 验证你的js，官方提供 UglifyJsPlugin 插件来压缩混淆js处理css，less, sass, postcss
可以通过 postcss-loader 来预处理css，比如加上css 属性的不同浏览器前缀处理图片，字体
可以通过 url-loader 来把不需要外链的资源统统转为base64编码
可以使用第三方插件 ImageminPlugin 对所有图片进行压缩
自动合并共用代码
webpack 的官方插件 CommonsChunkPlugin，你可以自由控制粒度
搭建开发服务器
使用 webpack-dev-server
或使用 koa/express + webpack-hot-middle + webpack-dev-middle
自动刷新浏览器
liveloading小意思，webpack可以模块热更新，就是说局部更改代码比你刷新浏览器更快
最小化引入资源
下一代 rollup 的打包工具最耀眼的功能就是支持 treeshaking 了，而 webpack 2.0 也支持
Webpack 还有很多有用的功能：解析资源别名使你不用在import 后面写一大长串路径。你担心调试的时候找不到哪行代码，可以使用devtool的 sourcemap。如果你不想你的css 打包到js 里你可以使用 ExtractTextPlugin 来抽取css。你也可以配合 http-proxy-middleware 来做远程接口转发，由于开发的时候静态资源服务器是node，所以有各式各样的 middleware 来满足你的各种需求。
Webpack 强大和灵活的地方是他的 plugin 和 loader，通过 loader 可以很轻易的对任何匹配的资源做操作，通过 plugin 则可以参与处理打包的阶段。再者他还提供了 middleware 的方式，可以配合 koa, express 一起使用。
