记录一个webpack自定义插件写法

92 阅读1分钟

开发的时候,可能会碰上一些特殊的需求,需要特殊处理产出代码产物,遂记录自定义插件如何编写;

ZipPlugin.js

const JSZip = require('jszip');
const { RawSource } = require('webpack-sources');
module.exports= class ZipPlugin {
    constructor(options={}) {
        this.options = options;
    }
    apply(compiler) {
        compiler.hooks.emit.tapAsync('ZipPlugin', (compilation, callback) => {
            const zip = new JSZip();
            for (const filename in compilation.assets) {
                const asset = compilation.assets[filename];
                zip.file(filename, asset.source());
            }
            zip.generateAsync({ type: 'nodebuffer' }).then((content) => {
                    compilation.assets[compilation.options.filename] = new RawSource(content);
                    callback();
            })
        });
        
    }
 
}

webpack.propd.js

const ZipPlugin =require('./ZipPlugin.js)
const config= {
plugins:[
    new ZipPlugin({
        filename:'test.zip'
    })
]