• style-loader是把翻译的css模块插入页面中
• css-loader是翻译css为模块
• less-loader是翻译less文件
• mp3-loader自定义，作用：①提醒文件过大，②当用户从mp3文件引用时，返回一个组件，而不是一个二进制文件
• jsinfo-loader写入其他文件

• Webpakck通过调用插件完成构建，loader作为遇到不识别文件的翻译器
• ProgressPlugin内置插件，用于构建进度显示
• bundlesizeWebpackPlugin自定义插件，用于提醒chunk文件大于用户设置值
• FilelistWebpackPlugin自定义插件，显示有多少chunk文件输出

1. 将命令行参数和默认参数合并，并执行webpack方法
2. 创建compiler对象，初始化基础插件，执行compiler.run。每次执行run编译都会创建compilation对象，compilation对象负责一次编译过程
3. 执行compiler的make方法，调用compilation的buildModule方法创建模块对象
4. 生成入口AST（抽象语法树），通过AST分析和递归加载依赖模块
5. 分析模块完成，执行compilation的seal方法，对每个chunk整理优化封装
6. 最后执行compiler的emitAssests方法，把生成的文件输出发哦ouput的目录

例如: compiler.hooks.emit.tap 编译创建chunk完成

• Compiler 编译器模块，是创建 编译实例 的主引擎
• 大多数面向用户的插件，都在 Compiler 上注册

• Compilation 是 Compiler 用来创建一次新的编译过程的模块
• 一个 Compilation 实例可以访问所有模块和它们的依赖
• 在一次编译阶段，模块被加载、封装、优化、分块、散列和还原

获取Compilation

apply() {
  compiler.plugin("compilation", compilation => {
    compilation.hooks.buildModule.tap('xxx', module => {
      console.log(module.resource)
    })
  })
}

• Parser 解析器实例在 Compiler 编译器中产生，用于解析 Webpack 正在处理的每个模块
• 可以用它提供的 Tapable 钩子，自定义解析过程

• compiler.hooks.emit.tap 同步插件
• compiler.hooks.emit.tapAsync 异步插件手动调用callback
• compiler.hooks.emit.tapPromise 异步插件返回一个Promise，手动触发resolve函数

compiler常用Hooks

• run,make,emit

https://www.digitalocean.com/community/tutorials/js-create-custom-webpack-plugin https://kettanaito.com/blog/writing-custom-webpack-loader https://juejin.cn/post/6918998088010956807 https://blog.csdn.net/Lyrelion/article/details/128501629 https://champyin.com/2020/01/12/%E6%8F%AD%E7%A7%98webpack-plugin/