无需CI/CD!手把手教你用Webpack插件实现Vue项目一键标准化打包

问题背景

在使用 Vue CLI 进行项目打包时,生成的 dist 目录包含所有编译后的文件。为了方便部署,通常需要将 dist 目录压缩成 ZIP 文件。然而,直接使用 Webpack 打包后生成的 ZIP 文件可能会出现以下问题:

  1. 部署过程繁琐: 每次部署完后,都需要手动将文件进行压缩打包。
  2. 目录结构不一致 :人员压缩打包使用的工具,可能不同,会导致ZIP 文件解压后,dist 目录可能被包含在 ZIP 文件的根目录中,导致目录结构不一致。
  3. 命名规范不统一:人员可能并不完全遵从包名命名规范,导致不同环境下的 ZIP 文件难以区分。

解决方案

这边比较推荐的方案有两个

  1. 引入持续集成/持续部署(CI/CD)工具
    • 使用Jenkins、GitLab CI、CircleCI等工具来自动执行构建和打包任务,保证每次构建的结果都是一致的。
    • CI/CD 工具还可以用来运行测试,确保代码质量并防止不符合规范的代码进入主分支。
  1. 使用脚本自动化打包过程
    • 编写脚本来自动完成打包过程,确保每次打包的一致性。可以使用批处理脚本(Windows)、Shell脚本(Linux/Mac)或构建工具如Ant、Maven、Gradle等。
    • 脚本应该能够根据规范创建正确的目录结构,并按照命名规则生成ZIP文件。

两个方案中,还是比较推荐CICD自动化部署的,CI/CD自动化部署通过实现代码变更的自动构建、测试和发布,显著加快了软件交付速度,同时提高了软件质量和稳定性,降低了人为错误的风险,并使得团队能够更频繁地安全更新产品,从而快速响应用户需求和市场变化,增强了整体开发效率和竞争力。

只可惜这边开发,是内网环境,开发环境和生产环境是隔离开的,使用不了这些工具。所以选择了第二种方案进行解决。

为了解决上述问题,我们可以使用 zip-webpack-plugin 插件。该插件可以自定义 ZIP 文件的输出路径、文件名以及压缩内容,从而确保生成的 ZIP 文件结构一致且命名规范统一。

步骤

步骤 1:安装 zip-webpack-plugin

首先,需要安装 zip-webpack-plugin 作为开发依赖。

sql 复制代码
For Webpack 4 / 5:
npm install zip-webpack-plugin --save-dev

For Webpack 3:
npm install [email protected] --save-dev

步骤 2:配置 vue.config.js

  1. 配置 vue.config.js
    vue.config.js 文件中,你需要配置 configureWebpackchainWebpack 来添加 zip-webpack-plugin 插件。以下是使用 configureWebpack 的示例:
arduino 复制代码
const ZipPlugin = require('zip-webpack-plugin');

module.exports = {
  // 其他配置...
  configureWebpack: (config) => {
    const plugins = [];

    if (process.env.NODE_ENV === 'production') {
      // 其他生产环境配置...
      
      plugins.push(
        new ZipPlugin({
          path: path.join(__dirname, './'), // 输出路径
          filename: 'dist.zip', // 输出文件名
          extension: 'zip', // 文件扩展名
        })
      )

    } else {
      config.devtool = 'eval-source-map';
    }

    config.plugins = [...config.plugins, ...plugins];
  }
};

按照上面的步骤,即可实现打包编译后,自动将编译的文件打包成zip

如果您有定制化需求,可以自行调整配置。例如:将打包后的dist进行压缩并输出到distZip里,解压后第一层是dist,命名规范:项目名称_环境_日期_时间

例:

javascript 复制代码
const ZipPlugin = require('zip-webpack-plugin');
const isProduction = ['production'].includes(process.env.NODE_ENV)
let { name } = require('./package.json')

module.exports = {
  // 其他配置...
  configureWebpack: (config) => {
    const plugins = [];

    // 只有生产环境才需要进行压缩
    if (isProduction) {
      // 其他生产环境配置...

      // 将打包文件压缩成zip包,方便发布上线
      const currentDate = new Date()
      const year = currentDate.getFullYear()
      const month = String(currentDate.getMonth() + 1).padStart(2, '0')
      const day = String(currentDate.getDate()).padStart(2, '0')
      const hours = String(currentDate.getHours()).padStart(2, '0')
      const minutes = String(currentDate.getMinutes()).padStart(2, '0')
      const environment = process.env.VUE_APP_BUILD_ENV || process.env.NODE_ENV
      plugins.push(
        new ZipPlugin({
          path: path.join(__dirname, 'distZip'), // 输出路径
          filename: `${name}_${environment}_${year}${month}${day}_${hours}${minutes}.zip`, // 输出文件名
          extension: 'zip', // 文件扩展名
          // 确保 dist 目录及其内容一起打包
          pathPrefix: 'dist/'
        })
      )

    } else {
      config.devtool = 'eval-source-map';
    }

    config.plugins = [...config.plugins, ...plugins];
  }
};

环境变量 文件 .env.build.prod

ini 复制代码
NODE_ENV = production
# 生产环境名称
VUE_APP_BUILD_ENV = PROD

如果不希望编译出来的文件上传到git,可以配置下.gitignore

bash 复制代码
node_modules
/dist
/distZip
  1. 构建项目:

完成上述配置后,你可以运行构建命令来生成 ZIP 文件。

arduino 复制代码
npm run build

结论

通过使用 zip-webpack-plugin,我们可以轻松地将前端打包编译后的 dist 目录压缩成 ZIP 文件,并确保生成的 ZIP 文件结构一致且命名规范统一。这不仅提高了部署的效率,还减少了因文件结构不一致导致的部署问题。希望这篇文章对你有所帮助!如果有任何问题或建议,欢迎随时交流。

相关推荐
小张快跑。9 分钟前
【Vue3】(二)vue3语法详解:自定义泛型、生命周期、Hooks、路由
前端·vue.js·typescript
开开心心就好20 分钟前
可增添功能的鼠标右键优化工具
前端·pdf·计算机外设·ocr·电脑·音视频·phpstorm
灿灿1213826 分钟前
npm、pnpm、yarn 各自优劣深度剖析
前端·javascript·npm·pnpm·yarn
Name:PLC1 小时前
vue3中使用watch
前端·javascript·vue.js
超级土豆粉1 小时前
ES6 扩展运算符与 Rest 参数
前端·ecmascript·es6
qq_12498707531 小时前
基于Spring boot+vue的中医养生系统的设计与实现(源码+论文+部署+安装+调试+售后)
java·vue.js·spring boot·后端·毕业设计
purpleseashell_Lili1 小时前
TypeScript
前端·typescript
哎呦你好1 小时前
CSS 盒子模型:一文了解padding和margin,使用内边距、外边距和边框随心所欲实现布局!
前端·css
前端 贾公子1 小时前
小程序使用web-view 修改顶部标题 && 安全认证文件部署在nginx
开发语言·前端·javascript
海盐泡泡龟2 小时前
大文件上传如何做断点续传?(分别使用vue、React、java)
java·vue.js·react.js