webpack基础

一、模块化

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；
• 流程对接：比如测试流程、语法检测等。