1. 背景介绍
前端开发的变化
随着 Node.js 的兴起，越来越多的人使用 JavaScript 开发后台的一些应用。同时促进了模块化开发和包管理生态系统的发展。所以目前在国外，越来越多的人使用 CommonJS 规范来处理模块加载。但是为了能让代码在浏览器上能正常运行，我们需要在上线前，将相互依赖的模块整合打包到一个文件，这样就可以避免 CommonJS 同步加载的缺陷。
Browserify 的热捧
最初在寻找打包工具时，发现大家都选择了 Browserify 这款打包工具。所以一开始我也毫不犹豫地选择了它。后来在使用过程中发现，Browserify 只能将所有文件打包成一个文件，如果需要分开打包，需要手动配置。那这样的打包方式，只适用如下一些场景：
- 小规模网站，即代码量小
- 很少更新网站，意味着业务代码很少更新
- 不太关心第一次页面加载时长
这显然不太适应大部分网站的使用场景。
2. 从 Browserify 叛逃到 Webpack
在实际使用过程中，我考虑到了一些代码合并优化的问题，比如是否可以将一些第三方库单独打包？不需要将所有代码打包到一个文件夹。是否可以分页面打包相关的代码？这些问题 Browserify 都不予理睬。后来又通过一些博文了解到 Webpack 这款打包工具。
在查阅官方文档和前人研究成果后，才发现 Webpack 是一款很强大的打包工具。它除了能能解决上面提到的几个问题，同时还支持其它一些特色功能。下面我来一一介绍一下这些功能：
Code Splitting
- 打包时排出某个文件
- 当第三方库占整个打包文件的大小比例比较大，比如 20% 以上「When your vendors reaches a certain percentage of your total app bundle. Like 20% and up」
- 经常会更新网站「You will do quite a few updates to your application」
- 不太关心第一次页面加载时长，但是当你更新网站时，你关心优化回访用户的使用体验「You are not too concerned about perceived initial loading time, but you do have returning users and care about optimizing the experience when you do updates to the application」
- 用户是通过手机访问的「Users are on mobile」
- 分多个入口打包文件，并提取多个合并文件中的共同文件
- 网站有多个独立的体验部分，但是它们共享大部分代码「You have an application with multiple isolated user experiences, but they share a lot of code」
- 有一个使用较少组件的移动版本「You have a mobile version using less components」
- 是一个典型的用户前台和后台应用网站，你不想在普通用户访问时加载后台的代码「You have a typical user/admin application where you do not want to load all the admin code for a normal user」
- 在某个文件中设置异步加载某些模块
- 网站规模很大，用户可以访问不同的部分「You have a relatively big application where users can visit different parts of it」
- 很在意第一次页面渲染时间「You do care a lot about initial render time」
以上这些功能覆盖了大部分的使用场景。
静态资源模块化加载
我们可以把一些静态资源「Img、CSS、Font、HTML Template 等」组合打包到一个文件，实现组件化开发。
编译文件
目前我们习惯用 SCSS 或 LESS 来写 CSS，用 CoffeeScript 写 JavaScript，还有 React 的 JSX 语法。
Webpack 提供了 sass-loader，coffee-loader, jsx-loader 等插件，当加载这些格式的模块文件时，会先执行编译，最后把编译结果引入指定文件。
插件
Webpack 提供了很多插件，比如 UglifyJsPlugin，用来压缩 JS。更多插件可以看这里
Sever 服务并提供类似 Liveload 功能
Webpack 能开启一个本地 Sever，同时监听各打包文件，当某个文件发生变动时，会重新打包。同时利用它提供的 Hot Mode 功能，能实现类似 Liveload 效果，具体表现如下：
- CSS 变化时，
不用刷新页面就能更新内容 - JSX Component 变化时，不用刷新页面就能更新内容
- 某个 JS 文件变动时，会自动重新打包并刷新页面
3. 结语
除了这些，Webpack 还提供了一些高级的功能。具体可以查看它的官网文档。但是目前来说，Webpack 不是 Gulp 的替代品，它们俩可以互相配合，发挥你的想象力，来提高前端开发的效率吧。
参考资料：
