Webpack多入口多出口打包组件：MultiZipPlugin

因为业务上有一个需求，须要每次将webpack输出的文件再打一个zip包，可是找了找没有找到合适的插件，因而本身写了一个。

API：

class:MultiZipPlugin
new MultiZipPlugin(options);
options: [{
    entrys: [],     // webpack打包完毕后，须要打入zip包的文件名数组
    zipName: "",    // zip包的名
}]
复制代码

下面给出一段vue-cli3的vue.config.js配置(不清楚为何vue这里要多包一层数组)

let multiZipPlugin = require("./src/plugin/multi-zip-plugin/index");

let pages = {
    page1: {
        entry: 'src/main.js',
        // 模板来源
        template: 'public/index.html',
        // 在 dist/index.html 的输出
        filename: 'page1.html',
    },
    page2: {
        entry: 'src/main_1.js',
        // 模板来源
        template: 'public/index.html',
        // 在 dist/index.html 的输出
        filename: 'page2.html',
    }
}

//不清楚为何vue这里要多包一层数组
let configs = [];
let options = [];
for (let page in pages){
    let option = {
        entrys: ["js", page + ".html"],
        zipName: page,
        zipPath: "",
    }
    options.push(option);
}

configs.push(options);

module.exports = {
    pages: pages,
    lintOnSave: false,
    chainWebpack: config => {
        config.plugin('multi-zip-plugin')
                .use(multiZipPlugin, configs);
    }
}
复制代码