常用的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