创建一个webpack插件

创建一个webapck插件,在chunk文件中查询关键字

1、创建一个webpackPlugin.js文件

webpackPlugin.js

2、添加以下代码

let colors = require(‘colors‘)//导入颜色插件class WebpackPlugin { constructor(doneCallback, emitCallback) { this.emitCallback = emitCallback this.doneCallback = doneCallback } apply(compiler) { compiler.hooks.shouldEmit.tap(‘WebpackPlugin‘, (compilation) => { Object.keys(compilation.assets).forEach((data) => { let content = compilation.assets[data].source(); //判断chunk文件中是否有关键字 if (content.indexOf(‘奥迪‘) != -1) { //出现 console.log(`\n\n`); console.log(colors.red.bold(‘出现关键字“奥迪”,文件在‘, data)) console.log(`\n`); throw new Error() } }) this.emitCallback(); }) compiler.hooks.emit.tap(‘WebpackPlugin‘, (err) => { // 在done事件中回调doneCallback this.doneCallback(); }) }}module.exports = WebpackPlugin

3、使用插件

1.在webpack.prod.conf中导入包const WebpackPlugin = require(‘./WebpackPlugin‘)2、在plugins中使用new CheckKeyWebpackPlugin(() => {//webpack 模块完成转换console.log(‘emit 事件发生了,所有模块的转换和代码块对应的文件已经生成好了~‘)}, () => {//webpack构建成功,并且文件输出了后会执行到这里,在这里可以做发布文件操作console.log(‘done 事件发生了,成功构建完成!‘)})

4、npm run build看效果

相关文章