创建一个webpack插件

标签：assets   hunk   效果   tor   ror   build   export   hooks   plugin   

创建一个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看效果

创建一个webpack插件

标签：assets   hunk   效果   tor   ror   build   export   hooks   plugin   

原文地址：https://www.cnblogs.com/z-anying/p/14844461.html