1. plugin概念

• webpack插件是一个具有apply方法的Javascript对象。apply方法会被webpack compiler调用，并且在整个编译生命周期都可以访问compiler对象。
• 原理：通过在生命周期的钩子中挂载函数，来实现功能扩展。

2. plugin语法

class MyPlugins {
  constructor(options) {
    console.log("插件选项", options);
  }
  // 必须带有apply方法
  apply(compiler) {
    // compilation是本次打包的上下文
    compiler.hooks.emit.tap("插件名称", (compilation) => {
      console.log("webpack构建过程开始", compilation);
    });
  }
}
module.exports = MyPlugins;

3. loader概念

• loader本质上就是一个ESM模块，它导出一个函数，在函数中对打包函数进行资源转换

提示

v4: loader-utils（接受loader的配置项） webpack 5 已经可以通过this.query 直接获取loader的options配置，所以不需要利用loader-utils工具获取。

4. loader语法：

v4

const marked = require('marked');
const { getOption } = require('loader-utils')
module.exports = function(source) {
    const html = marked.parse(source);
    const options = getOption(this);
    console.log(options, '利用loader-utils工具获取');
    return `module.exports = ${JSON.stringify(html)}`;
}

v5

const marked = require('marked');
module.exports = function(source) {
    const html = marked.parse(source);
    console.log(this.query, 'loader的options配置')
    return `module.exports = ${JSON.stringify(html)}`;
}

提示

注意声明函数的时候，不要使用箭头函数，因为它指向当前模块，如果需要在相关函数中取得配置项，需要改为普通函数

5. loader机制：