内容

1. webpack 打包流程（ 插件 ）
2. webpack 中的插件是如何工作的
3. 动手写写插件

前置分析

找一找插件与webpack 之间的关系

1. npx webpack
2. 最终它会找到 node_modules/webpack/lib/webpack.js

分析webpack.js

1. 在 else 逻辑当中核心就是调用 create 然后返回 compiler
2. 在 if 当中也是调用 create 返回 compiler
3. 在 create 方法中最终也会执行 createCompiler 来返回一个 compiler 实例
4. 在 createCompiler 当中执行 new Compiler 获取一个实例，同时还做了很多其它的事件（ xxxx ）
5. 回到 webpack.js 当中，它会调用许多钩子身上的 call 来触发当时的 tap 操作（）
6. 除此之外还遍历了 plugins 当中的所有插件（ 插件的挂载， 在 compiler 被创建之后就都挂载了 ）
7. 后续无论使用 call 还是 apply ，都是将 compiler 实例与插件关联起来
8. webpack 当中的插件就是一个类，而且它有一个 apply 方法，并且当前方法会接收一个 compiler 实例对象

// this 就是将来 new Compiler() 得到的实例对象
// this 的身上有一个 hooks 属性
// hooks 的值又是一个键值对，其中键名就是我们自定义的钩子名（  ）
// 钩子名所对应的值就是当前钩子的类型（ tapable-->生成不同类型的钩子 ）

插件的使用

1. 在我们没有自定义插件或者去使用 webpack 默认预留的钩子时，它有自己的一套成功打包的流程
2. 后续我们发现，可以基于它的规则参数到整个 webpack 打包过程中

// 如果想要实现插件的对应的功能，首先需要执行在什么时候执行插的钩子
// module 是一个文件也是一个模块
// 从入口文件出发，它和它依赖的模块会组成一个代码块（ chunk ）， chunk.name
// 一般来说，一个chunk 会生成一个 asset ，也就是我们所谓的资源
compiler.hooks.compilation.tap('ListPlugin', (compilation) => {
  compilation.hooks.chunkAssets.tap('abc', (chunk, filename) => {
    console.log(chunk, '>>>>>', filename)
  })
})