1. 概述
Webpack是一个模块合并的工具，认为前端所有资源JS,CSS,图片等都是组件，在构建前端时，可进行选择性加载，一次初始化后，webpack就会帮我们进行自动化的引用和导入。
在越来越多AJAX的使用情况下，局部刷新慢慢取代整页刷新，因此一个页面的代码，除了初始化时状态还包括运行时状态，客户端也要承载越来越多的代码，大量的代码需要很好的组织，而webpack则可以提供一个将不同代码分割成不同模块的方式。
2. 常见的JS模块化方式
- <script>标签
- CommonJS
- AMD及其衍生
- ES6模块
其中
1. <script>标签标签
优点：
使用简单，学习成本低，全兼容
缺点：
全局空间的污染
需要合理的加载顺序
浏览器多次请求造成额外开销
开发者要解决模块/库的依赖
大型项目中列表冗长且难以管理
2. CMD加载，如CommonJS,SeaJS
优点：
使用相较于AMD要更加简单，
服务器端模块复用
有大量现成模块方便npm安装使用
缺点：
阻塞式加载不适用于web程序
无法异步加载多个模块
3. AMD加载，如RequireJS
优点：
可以异步加载各个模块
缺点：
使用起来不太简单，头部声明不利于阅读和编写
第三方框架，对AMD支持的不好，要shim来兼容引用哪些不兼容框架
4. ES6模块
EcmaScript6向JavaScript添加了许多语言结构，因此形成了另一种模块系统。
优点：
易于解析，将会成为前端通用标准
缺点：
对前端开发人员的面向对象的模块化编程思想有了更高的要求
兼容性不好，仅很高版本浏览器才自持
3. 安装使用
不需要我再写了，webpack官网文档
以下部分摘自segment default
Webpack的功能特点
代码拆分
依赖树有同步和异步两种类型，异步依赖行为将作为拆分点并生成一个新的区块，文件在区块中被分发到每一个区块中去。然后按需加载，而不是将代码拆分为公共代码代码文件。
Loaders加载器
webpack只处理JavaScript所以loaders被用来处理将各类资源转换成JavaScript。由此所有的资源都能作为模块。
智能分析
web pack 拥有的智能分析系统可以处理几乎所有的第三方库。甚至允许在依赖中使用形如 require(“./templates/“ + name + “.jade”)的写法。智能分析系统可以处理大多数常见的模块格式如： CommonJs 与 AMD。
插件系统
webpack 附带一个强大的插件（plugin）系统。绝大多数特性都基于该插件系统。它能让你依据自身需求去定义web pack 还能发布开源插件。
4. 总结
webpack的核心思想：
- 一切皆模块
- 按需加载，官网文档原文为“load on demand”
5. 适用性评估
- 适用于前后端分离开发
- 适用于单个页面的web应用，按需加载各个组件和模块
- 适合配合reactjs进行开发
- 适合移动端的网页开发，仅加载所需，节省带宽和流量，以及额外请求数
- 不适用于页面元素相当复杂的大型电商类网站，因为在复杂页面中，小板块的版本切换，或者灰度发布在webpack中支持不好，webpack则会重新打包所有文件，增量更新的实现较为复杂。
作者 @Brady
2016年9月22日