一、模块化
CommonJS、AMD 和 ES6 Module 规范（另外还有 CMD、UMD 等），下面我们来简单看一下：
1、CommonJS
nodejs 广泛应用得一种模块化规范, 是一种 同步加载 模块依赖的方式；
- require：引入一个模块
- exports：导出模块内容
- module：模块本身
2、AMD
JS 模块加载库 RequireJS 提出并且完善的一套模块化规范，AMD 是一条 异步加载 模块依赖的方式；
- id：模块的 id
- dependencies：模块依赖
- factory：模块的工厂函数，即模块的初始化操作函数
- require：引入模块
3、ES6 Module
ES6 推出的一套模块化规范。
- import：引入模块依赖
- export：模块导出
Tips：除了上面三大主流规范，还有
- CMD（国产库 SeaJS 提出来的一套模块规范）
- UMD（兼容 CommonJS 和 AMD 一套规范）。
目前多数模块的封装，既可以在 Node.js 环境又可以在 Web 环境运行，所以一般会采用 UMD 的规范，后面 Webpack 针对 lib 库的封装会有进一步介绍。
二、webpack 解决什么问题
1、Grunt、Gulp 缺陷
- 打包的思路是：遍历源文件 → 匹配规则 → 打包
- 缺陷：做不到按需加载，到底页面用不用，打包过程中是不关心的
2、webpack 得好处
- 不同之处：从 入口文件 开始，经过模块 依赖加载 、 分析 和打包 三个流程完成构建。
- 优势：达到按需加载的目的，比如code split（拆分公共代码等）。
3、webpack 解决的问题
- 模块化打包，一切皆模块，JS 是模块，CSS 等也是模块；
- 语法糖转换：比如 ES6 转 ES5、TypeScript；
- 预处理器编译：比如 Less、Sass 等；
- 项目优化：比如压缩、CDN；
- 解决方案封装：通过强大的 Loader 和插件机制，可以完成解决方案的封装，比如 PWA；
- 流程对接：比如测试流程、语法检测等。