Webpack(一)：背景介绍

Webpack 本质是一个模块化打包工具，通过“万物皆模块”这种设计思想，巧妙地实现了整个前端项目的模块化。

Webpack 解决的问题

如何在前端项目中更高效地管理和维护项目中的每一个资源。

---

模块化的演进过程

• Stage 1 - 文件划分方式
• Stage 2 - 命名空间方式
• Stage 3 - IIFE
• Stage 4 - IIFE 依赖参数

模块加载的问题

更为理想的方式应该是在页面中引入一个 JS 入口文件，其余用到的模块可以通过代码控制，按需加载进来。

模块化规范的出现

早期制定前端模块化标准时，并没有直接选择 CommonJS 规范（CommonJS 约定的是以同步的方式加载模块），而是专门为浏览器端重新设计了一个规范，叫做 AMD （ Asynchronous Module Definition） 规范，即异步模块定义规范。同期还推出了一个非常出名的库，叫做 Require.js，它除了实现了 AMD 模块化规范，本身也是一个非常强大的模块加载器。

在 AMD 规范中约定每个模块通过 define() 函数定义，这个函数默认可以接收两个参数，第一个参数是一个数组，用于声明此模块的依赖项；第二个参数是一个函数，参数与前面的依赖项一一对应，每一项分别对应依赖项模块的导出成员，这个函数的作用就是为当前模块提供一个私有空间。如果在当前模块中需要向外部导出成员，可以通过 return 的方式实现。

// AMD 规范定义一个模块