webpack4 plugin 利用插件更改输出资源内容

插件 index.js：

const pluginName = 'myTestPlugin';

class myTestPlugin {
    apply(compiler) {
        compiler.hooks.emit.tapAsync(pluginName, (compilation, cb) => {
            //可遍历出所有的资源名
            for (var filename in compilation.assets) {
                //console.log('name==', filename) 
            }
            compilation.chunks.forEach(function (chunk) {
                chunk.files.forEach(function (filename) {
                    // compilation.assets 存放当前所有即将输出的资源
                    // 调用一个输出资源的 source() 方法能获取到输出资源的内容
                    let source = compilation.assets[filename].source();
                    source = '/*这是我通过webpack plugin 插八的一行代码*/\n' + source
                    compilation.assets[filename] = {
                        source: function () {
                            return source
                        },
                        size: function () {
                            return source.length
                        }
                    }
                });
            })
            cb()
        });
        compiler.hooks.done.tap(pluginName, (compilation) => {
            console.log('webpack 构建完毕！');
        });
    }
}

module.exports = myTestPlugin;

webpack.config.js

//引入webpack插件
const myTestPlugin = require('./webPackPlugin/index.js')

//在plugin中创建插件实例
module.exports = {
    ...
    plugins:[
        new myTestPlugin()
    ]
}