第55题：loader和plugin的区别是什么？

[zxdfe]

Loader

• Loader本质上就是一个函数，在函数中对接收到的内容进行转换，返回转换后的结果。异步用this.async()返回结果，同步用this.callback(null, result)返回结果。
• 模块转换器，将非JS模块转换为webpack能识别的JS模块
• webpack loader将所有类型的文件，转换为应用程序的依赖图可以直接引用的模块
• 多个loader执行顺序从右往左（compose函数组合顺序）

module.exports = function(input) { 
    const callback = this.async();

        // webpack5内置了loaderUtils.getOption,用this.query就能接收参数
        console.log(this.query) 
        const result =  source.replace('webpack5', this.query.name)
        // 同步用this.callback 返回
        this.callback(null, result)
        callback(null, input + input); 
};

Plugin

• Plugin 本质上是一个类，或者说构造函数，基于tapable库来控制钩子函数的发布和订阅。

• 扩展插件，webpack运行的各个阶段，都会广播出对应的事件，插件去监听对应的事件。

• 插件名称就是类名

• plugin必须要有一个apply方法，接收compiler对象，在compiler对象的hooks（生命周期）上绑定要处理的逻辑

  module.exports = class MyPlugin { 
  constructor(options) {
      this.options = options; 
  }
  apply(compiler) {
          compiler.hooks.done.tap('MyPlugin', (compilation, callback) => {
        ...
        callback()
      })
  }
  };