功能
webpack 是前端开发中，自动化/工程化的打包工具，借助它，可以实现模块自动合并压缩、图片转base64、实现雪碧图、实现代码编译、兼容处理、跨域处理、项目预览...等
缺点：项目比较大的时候，webpack 因为其底层处理机制的问题，导致每一次打包速度都会有点慢。
模块化
1. 单例模式：
不足：需要手动分析模块依赖关系，并按顺序引用到 script 标签中，且所有模块都是在 script 中一个个导入，http 请求会很多。
2. AMD 模式：
引入 require.js 帮忙分析模块间的依赖关系，解决顺序问题。
不足：模块都是前置导入，只有所有依赖模块都导入完毕，才会执行代码，会阻塞后续代码执行。
3. CommonJS 规范：
- 可以按需导入，用的时候使用 require 加载所需模块；
- 支持模块缓存；
- require 导入的时候代码是同步的。
不足：只支持 node 或 webpack 环境下运行，不支持浏览器环境（无法识别 require，报错）。
4. ES6Module 规范：
- 在 html 中使用需要在 script 标签中添加属性
type="module"，让 JS 支持 ES6Module 模块规范；
<script type="module" src="main.js"></script>
- import 导入是异步的，不会阻塞页面渲染；
- import 必须写在最前面，不能在代码中间 import。
不支持 IE（ES6 的东西IE都不支持）
export 语法：
/*
模块导出：export 或者 export default
无论基于何种方式，模块导出的永远是一个“Module对象”！！
第一种方式：export
+ 一个模块中可以使用多次，分别导出多项内容
+ 导出的每一项内容，都是给“Module对象”设置相关的成员
第二种方式：export default
+ 一个模块中只能用一次
+ 它是给“Module对象”设置一个叫做default的成员，成员值是导出的内容
*/
// 正确语法：导出一个变量/值/创建函数表达式/对象...
export default sum;
export default 10;
export default function fn() { };
export default {
x: 10,
name
};
// 错误语法
export default let age = 12;
// 语法：不能直接导出一个变量/值，必须在声明的时候“同时导出”
// export name; //错误的写法
export let age = 14; //声明一个变量并且导出「Module对象.age=14」
export function fn() { };
export const obj = {};
// 语法：可以导出一个对象(或代码块)，其中包含多个我们需要导出的内容
export {
name, //正确语法：前提name是存在的，我们把name赋值给Module对象，值就是name变量的值
// x:10 //错误语法：不能直接在这用键值对方式赋值
};】
5. import 和 require 导入模块的区别
（1）调用时机不同：import 是编译时调用，所以必须放在代码顶部；require 是运行时调用，所以可以放在任何地方。
（2）本质不同：
- require 是赋值过程。module.exports后面的内容是什么，require的结果就是什么，比如对象、数字、字符串、函数等，然后再把require的结果赋值给某个变量，它相当于module.exports的传送门。
- import 是解构过程，但是目前所有的引擎都还没有实现import，我们在node中使用babel支持ES6，也仅仅是将ES6转码为ES5再执行，import语法会被转码为require。
