使用filemanager-webpack-plugin将前端项目打包成zip压缩包

使用filemanager-webpack-plugin插件将前端的dist目录打包成zip压缩包，省去手动压缩，进一步可以配合 idea 的Cloud Toolkit插件 或者jekenis进行自动化部署（本文不介绍自动化部署）。

步骤：
安装

npm 安装插件

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

yarn安装

yarn add filemanager-webpack-plugin --dev

配置;
配置文件vue.config.js中新增：

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

找到webpack配置节点，新增插件配置

 new FileManagerPlugin({  //初始化 filemanager-webpack-plugin 插件实例
        events: {
          onEnd: {
            delete: [   //首先需要删除项目根目录下的dist.zip
              './dist.zip',
            ],
            archive: [ //然后我们选择dist文件夹将之打包成dist.zip并放在根目录
              {source: './dist', destination: './dist.zip'},
            ]
          }
        }
      })

发布脚本：

#!/bin/bash -e

# 替换自己服务器上面存放dist的路径，不包含dist和最后的那个斜杠
localName=/usr/local/nginx/html
vueName=dist.zip
time1=$(date "+%Y%m%d%H%M%S")
source /etc/profile

# 备份原来的dist文件
mv $localName/dist $localName/'dist'$time1
#解压新版本
unzip -d dist $localName/dist.zip
echo  "前端项目部署完成"

脚本可配合idea 的插件Cloud Toolkit 或者Cloud Toolkit完成自动部署。