自定义BannerWebpackPlugin

功能

BannerWebpackPlugin的功能很简单，是给打包输出的文件添加注释。

开发思路

1、通过compilation.assets可以拿到所有即将打包输出的资源文件。
2、遍历资源列表，获得资源后写入注释。
3、触发compiler.hooks.emit钩子，把改好的资源输出。

实现

/*
    1、webpack加载webpack.config.js中所有配置，此时就会new MyPlugin(),执行插件的constructor
    2、创建compiler对象
    3、遍历所有plugins中的apply方法
    4、执行编译流程，触发hooks事件
*/
class BannerWebpackPlugin {
    constructor() {
        console.log('BannerWebpackPlugin constructor...');
    }
    apply(compiler) {
        console.log('apply...');
        compiler.hooks.emit.tap('BannerWebpackPlugin', (compilation) => {
            const extArr = ['css', 'js'];
            const assets = Object.keys(compilation.assets).filter(item => { //只获取css和js资源
                const extName = item.split('.').pop();
                return extArr.includes(extName);

            });

            console.log(assets);
            const prefix = `
            /*
                Author: Bill
                Date: 2023/07/21
            */
           `;

            assets.map(item => {

                const source = compilation.assets[item].source();//获取内容

                const dest = prefix + source;//字符串拼接

                compilation.assets[item] = {//弄好了塞回去
                    source() {
                        return dest;
                    },
                    size() {
                        return dest.length;
                    }

                };


            });

        });
    }
}

module.exports = BannerWebpackPlugin;

webpack完整工作流程