背景：

目前所在公司的項(xiàng)目，正式環(huán)境是由后臺(tái)部署，前端需要將打包后的dist文件給到后端，為了便于傳輸，每次都是先npm run build打包，再手動(dòng)壓縮成zip包，給到后端，很麻煩。

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

工具：

經(jīng)過調(diào)研 zip-webpack-plugin 、webpack-zip-plugin、filemanager-webpack-plugin 這三個(gè)插件，最終采用 filemanager-webpack-plugin

安裝：

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

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

安裝過程報(bào)錯(cuò)如下：

看到報(bào)錯(cuò)信息，我們開始從下列提示著手

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的對(duì)等方，但未安裝

猜想應(yīng)該是filemanager-webpack-plugin@3.0.0需要的webpack版本與系統(tǒng)不匹配，

經(jīng)過一番查找也沒有找到filemanager-webpack-plugin@3.0.0需要的對(duì)等webpack版本是，

綜合考慮，決定降低filemanager-webpack-plugin版本 注意：如果不報(bào)錯(cuò)，不需要采取降級(jí)處理

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

配置：

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

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

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

運(yùn)行：

直接 npm run build 即可看到項(xiàng)目根目錄生成一個(gè) dist.zip 壓縮包

總結(jié)

以上是生活随笔為你收集整理的将打包后的dist文件夹压缩成zip包的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。