拉钩 https://kaiwu.lagou.com/course/courseInfo.htm?courseId=88#/detail/pc?id=2260
webpack.xmind
webpack.xmind

第01讲：Webpack 究竟解决了什么问题？

Webpack 目标：如何在前端项目中更高效地管理和维护项目中的每一个资源

模块化的演进过程

  1. Stage 1 - 文件划分方式

缺点：

  • 模块直接在全局工作，大量模块成员污染全局作用域；
  • 没有私有空间，所有模块内的成员都可以在模块外部被访问或者修改；
  • 一旦模块增多，容易产生命名冲突；
  • 无法管理模块与模块之间的依赖关系；
  • 在维护的过程中也很难分辨每个成员所属的模块。
  1. Stage 2 – 命名空间方式

缺点：
这种命名空间的方式只是解决了命名冲突的问题，但是其它问题依旧存在。

  1. Stage 3 – IIFE

  2. Stage 4 - IIFE 依赖参数

  3. CommonJS 规范

  • Node.js 中所遵循的模块规范
  • 一个文件就是一个模块，每个模块都有单独的作用域，通过 module.exports 导出成员，再通过 require 函数载入模块
  • CommonJS 约定的是以同步的方式加载模块
  1. AMD （ Asynchronous Module Definition） 规范
  • 异步模块定义规范（为浏览器设定的规范）
  1. CMD
  2. 模块化的标准规范 - ES Modules 规范

image.png
image.png

第02讲：如何使用 Webpack 实现模块化打包？

核心诉求

  • 能够将散落的模块打包到一起
  • 能够编译代码中的新特性
  • 能够支持不同种类的前端资源模块