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);
    }
}
複製代碼