一、模块化
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;
- 流程对接:比如测试流程、语法检测等。
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。