webpack plugin手写合集

191 阅读1分钟

常用的plugin钩子

  • entryOption : 在 webpack 选项中的 entry 配置项 处理过之后,执行插件。

  • afterPlugins : 设置完初始插件之后,执行插件。

  • NormalModuleFactory:针对于模块资源请求的处理 hook。

  • compilation : 编译创建之后,生成文件之前,执行插件。。

  • emit : 生成资源到 output 目录之前。

  • done : 编译完成

这里是原文

删除console.log

class emitPlugin{
  apply(compiler){
    compiler.hooks.emit.tapAsync('emitPlugin', (compilation, callback) => {
      let file = compilation.assets
      for(let keys in file){
        const sourceText = compilation.assets[keys].source();
                const rgx = /console.log\(time\)/;
                const newData = sourceText.replace(rgx, "");
                compilation.assets[keys] = {
                    source: function() {
                        return newData;
                    },
                    size: function() {
                        return newData.length;
                    }
                }
      }
      callback()
    })
  }
}
module.exports = emitPlugin

在生成的html文件中插入script标签

const HtmlWebpackPlugin = require('html-webpack-plugin')
class ScriptPlugin{
  apply(compiler){
    compiler.hooks.compilation.tap('ScriptPlugin', (compilation) => {
      HtmlWebpackPlugin.getHooks(compilation).alterAssetTags.tap(
        'ScriptPlugin',
        (data) => {
          const scriptTag = data.assetTags.scripts
          scriptTag.unshift({
            tagName: 'script',
            voidTag: false,
            meta: { plugin: 'ScriptPlugin' },
            attributes: {
              defer: true,
              type: undefined,
              src: './main.js',
            },
          });
        }
      );

    })
  }
}
module.exports = ScriptPlugin