webpack动机

模块化风格

---

1. <script>标签

<script src="module1.js"></script>
<script src="module2.js"></script>
<script src="module3.js"></script>

• 缺点：
  • 全局对象的冲突
  • 加载顺序的重要性
  • 需要解决模块依赖的问题
  • 在大项目中难以维护

2. CommonJs： 同步的require

用同步的require方法来加载依赖和返回暴露的接口。
一个模块可以通过给exports对象添加属性，或者设置module.exports的值来描述暴露的对象

require("module")
require("../file.js")
exports.doStuff = function () {}
module.exports = someValue

在nodejs中使用
优点：

• 服务端的代码可以重用
• npm中有大量模块
• 用起来简单方便

缺点：

• 阻塞调用无法在网络环境应用，网络请求是异步的
• 不能并行require多个模块

3. AMD：异步的require

4. ES6 模块

import "jquery"
export function doStuff () {}
module "localModule" {}

优点：

• 静态分析方便
• 作为ES的标准前途是光明的

缺点：

• 浏览器支持还需要很长的时间
• 这种风格的模块不多

5. webpack分块传输

• 当编译所有模块时，将模块分成多个较小的块
  这会使得多个请求更小、更快。初始阶段不需要的模块可以按需加载。