前端项目Build时自动生成压缩包

最新推荐文章于 2024-04-18 10:06:34 发布

Wonderful_Wan8

最新推荐文章于 2024-04-18 10:06:34 发布

阅读量424

点赞数 3

文章标签：前端

本文链接：https://blog.csdn.net/qq_41220477/article/details/131184275

版权

文章介绍了如何在前端项目构建过程中，利用webpack的FileManagerPlugin插件自动完成压缩包的生成。通过安装该插件并配置vue.config.js，可以在Build结束时自动删除旧的zip文件并创建新的打包文件，提高工作效率。

摘要由CSDN通过智能技术生成

前端项目Build时自动生成压缩包

测试：老哥项目做完了吗，打个包给我吧
我：3个都要么？
测试：111

10分钟过去了。。。

测试：老哥我烟都抽完了
我：刚build完，正在压缩

下一秒，测试已经过来

拍着我肩膀问：在build的时候，为什么不能顺手就压缩了？你行不行啊？！
我：…

所以，都3056年了，你还在手动进行zip压缩？

下面就教你使用webpack的FileManagerPlugin插件！

使用FileManagerPlugin插件自动压缩

1. 安装FileManagerPlugin依赖

yarn add filemanager-webpack-plugin@^5.0.0 --dev

2. vue.config.js 中配置使用

// 引入插件
const FileManagerPlugin = require('filemanager-webpack-plugin')
// 注：此处wms为我个人设置，默认为dist
module.exports = {
  publicPath: '/',
  outputDir: 'wms',// 输出文件目录(默认wms文件夹)
  assetsDir: 'static',
  productionSourceMap: false, // 去掉打包后的map文件
  configureWebpack: {
    plugins: [
      new FileManagerPlugin({
        // 注意！记得这里需要加一层events节点，否则会报错
        events: {
          onEnd: {
            delete: [
              './wms.zip',
            ],
            archive: [{
              source: './wms',
              destination: './wms.zip'
            }]
          }
        }
      })
    ]
  }
}