webpack 打包后代码 zip 压缩

背景

当我们完成前端项目的开发，准备部署到线上时，需要将打包的文件发送给部署的同事。为了节省发送时间，经常需要将打包生成的 dist 目录进行压缩后进行发送。
那么有没有办法，让项目打包后，自动生成一个 zip 压缩的文件呢？
答案是肯定的，可以进行以下插件的安装和配置。
这样下次运行 npm run build 的时候，会自动在项目根目录为我们生成构建后文件的 zip 压缩文件。

安装插件

npm install -D zip-webpack-plugin

配置

// vue.config.js
const ZipPlugin = require('zip-webpack-plugin')

module.exports = {
  configureWebpack: {  //webpack的相关配置在这里
    plugins: [
      new ZipPlugin({
          // OPTIONAL: defaults to the Webpack output path (above)
          // can be relative (to Webpack output path) or absolute
          path: './../',
          // OPTIONAL: defaults to the Webpack output filename (above) or,
          // if not present, the basename of the path
          filename: 'my_app.zip',
          // OPTIONAL: defaults to 'zip'
          // the file extension to use instead of 'zip'
          extension: 'zip',
          // OPTIONAL: defaults to the empty string
          // the prefix for the files included in the zip file
      })
    ]
  }
}