將打包后的dist文件夾壓縮成zip包

背景：

目前所在公司的項目，正式環境是由后台部署，前端需要將打包后的dist文件給到后端，為了便於傳輸，每次都是先npm run build打包，再手動壓縮成zip包，給到后端，很麻煩。

所以想通過插件自動將打包后的dist文件壓縮成壓縮包，徹底解決我們的雙手～～

工具：

  經過調研 zip-webpack-plugin 、webpack-zip-plugin、filemanager-webpack-plugin 這三個插件，最終采用 filemanager-webpack-plugin

安裝：

    npm install filemanager-webpack-plugin --save-dev

    github地址：https://github.com/gregnb/filemanager-webpack-plugin

    安裝過程報錯如下：

 

    看到報錯信息，我們開始從下列提示着手

    filemanager-webpack-plugin@3.0.0 requires a peer of webpack@^4 || ^5 but none is installed. You must install peer dependencies yourself.

    信息顯示：filemanager-webpack-plugin@3.0.0需要webpack@^4 | | ^5的對等方，但未安裝

    猜想應該是filemanager-webpack-plugin@3.0.0需要的webpack版本與系統不匹配，

    經過一番查找也沒有找到filemanager-webpack-plugin@3.0.0需要的對等webpack版本是，

    綜合考慮，決定降低filemanager-webpack-plugin版本 注意：如果不報錯，不需要采取降級處理

在package.json的 devDependencies 加入 "filemanager-webpack-plugin": "2.0.5"，並重新 cnpm install ,安裝成功

配置：

在vue.config.js添加如下代碼

const FileManagerPlugin = require('filemanager-webpack-plugin')

module.exports = {
  ...
 configureWebpack: (config) => {
  // 為生產模式添加壓縮插件
if (process.env.NODE_ENV === 'production') {
      
   // 將打包后的dist文件自動壓縮成zip包
   config.plugins.push(
      new FileManagerPlugin({
         onEnd: {
            // delete: [ './dist.zip'],
           archive: [{ source: './dist', destination: './dist.zip' }]
          }
  }))}}}

運行：

直接 npm run build 即可看到項目根目錄生成一個 dist.zip 壓縮包