乐趣区

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;
  • 流程对接:比如测试流程、语法检测等。
退出移动版