webpack4系列教程，如何编写plugin处理html代码逻辑？

output: {
    filename: 'js/[name].[hash:8].bundle.js',
    path: path.resolve(__dirname, 'dist'),
    publicPath: function (a, b) {
        console.log(a,b);
        return "//cdn/" + a.hash + "/";
    }
},

{
  test: /\.css$/,
  use: [
    {
      loader: MiniCssExtractPlugin.loader,
      options: {
        publicPath: (resourcePath, context) => {
          return path.relative(path.dirname(resourcePath), context) + '/';
        },
      },
    },
    'css-loader',
  ],
},

// If your plugin is direct dependent to the html webpack plugin:
const HtmlWebpackPlugin = require('html-webpack-plugin');
// If your plugin is using html-webpack-plugin as an optional dependency
// you can use https://github.com/tallesl/node-safe-require instead:
const HtmlWebpackPlugin = require('safe-require')('html-webpack-plugin');

class MyPlugin {
  apply (compiler) {
    compiler.hooks.compilation.tap('MyPlugin', (compilation) => {
      console.log('The compiler is starting a new compilation...')

      // Static Plugin interface |compilation |HOOK NAME | register listener 
      HtmlWebpackPlugin.getHooks(compilation).beforeEmit.tapAsync(
        'MyPlugin', // <-- Set a meaningful name here for stacktraces
        (data, cb) => {
          // Manipulate the content
          data.html += 'The Magic Footer'
          // Tell webpack to move on
          cb(null, data)
        }
      )
    })
  }
}

module.exports = MyPlugin

compilation.runtimeTemplate.outputOptions

constructor(options) {
    // console.log('插件被使用了')
    this.options = options;
}

data.html

let MyPlugin = require(path.resolve(__dirname, 'plugin/test.js'));
module.exports = {
    //...
    output: {
        //...
        publicPath: "//cdn/",
    },
    plugins: [
        new MyPlugin({ publicPath: '//css.cdn/' }),
        //...
    ],
}