webpack基础

1、模块化

CommonJS、AMD和ES6 Module规范（另外还有CMD、UMD等），下面咱们来简单看一下：

一、CommonJS

nodejs普遍应用得一种模块化规范, 是一种 同步加载 模块依赖的方式；

• require：引入一个模块
• exports：导出模块内容
• module：模块自己

二、AMD

JS模块加载库RequireJS提出而且完善的一套模块化规范，AMD 是一条 异步加载 模块依赖的方式；

• id：模块的 id
• dependencies：模块依赖
• factory：模块的工厂函数，即模块的初始化操做函数
• require：引入模块

三、ES6 Module

ES6 推出的一套模块化规范。

• import：引入模块依赖
• export：模块导出

Tips：除了上面三大主流规范，还有

• CMD（国产库 SeaJS 提出来的一套模块规范）
• UMD（兼容 CommonJS 和 AMD 一套规范）。

目前多数模块的封装，既能够在 Node.js 环境又能够在 Web 环境运行，因此通常会采用 UMD 的规范，后面 Webpack 针对 lib 库的封装会有进一步介绍。

2、webpack解决什么问题

一、Grunt、Gulp 缺陷

• 打包的思路是：遍历源文件 → 匹配规则 → 打包
• 缺陷：作不到按需加载，到底页面用不用，打包过程当中是不关心的

二、webpack得好处

• 不一样之处：从 入口文件 开始，通过模块依赖加载、分析和打包三个流程完成构建。
• 优点：达到按需加载的目的，好比code split（拆分公共代码等）。

三、webpack解决的问题

• 模块化打包，一切皆模块，JS 是模块，CSS 等也是模块；
• 语法糖转换：好比 ES6 转 ES五、TypeScript；
• 预处理器编译：好比 Less、Sass 等；
• 项目优化：好比压缩、CDN；
• 解决方案封装：经过强大的 Loader 和插件机制，能够完成解决方案的封装，好比 PWA；
• 流程对接：好比测试流程、语法检测等。