使用node执行命令, 使前端项目打包后自动压缩成zip包

在 vue cli2 的项目中 找到 build/build.js，在webpack(webpackConfig, cb) 的 回调函数cb中添加

const exec = require('child_process').exec

exec('cd .\\dist && del dist.zip', function(error) {
  if (error) {
    console.log(error)
  }
  // D:\\program\\WinRAR\\WinRAR.exe 需要改为你电脑上WinRAR的安装目录
  exec('cd .\\dist && D:\\program\\WinRAR\\WinRAR.exe a -r dist.zip .\\*.*', function(error) {
    if (error) {
      console.log(error)
    }
  })
})

就会在webpack打包结束后将我们的打包出来的文件打包成zip包

vue cli3 中要麻烦些，需要在 vue.config.js 中找到

configureWebpack

在这个选项下添加插件

configureWebpack: config => {
    if (process.env.NODE_ENV === 'production') {
      config.plugins.push({
        apply: (compiler) => {
          compiler.hooks.done.tap(pluginName, compilation => {
            
            // 这里执行我们的代码
            const exec = require('child_process').exec

            exec('cd .\\dist && del dist.zip', function(error) {
              if (error) {
                console.log(error)
              }
              // D:\\program\\WinRAR\\WinRAR.exe 需要改为你电脑上WinRAR的安装目录
              exec('cd .\\dist && D:\\program\\WinRAR\\WinRAR.exe a -r dist.zip .\\*.*', function(error) {
                if (error) {
                  console.log(error)
                }
              })
            })
            
          });
        }
      })
    } else {
      // 为开发环境修改配置...
    }