vue 项目配置自动打压缩包

vue cli3 创建的项目

　1.安装包　

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

　2. 配置vue.config.js

//引入包
const path = require('path');
const FileManagerPlugin = require('filemanager-webpack-plugin');
const date = require('silly-datetime');
const ts = date.format(new Date(), 'YYYYMMDDHHmmss');
// 路径根据自己项目修改
const projectName = __dirname.slice(path.resolve(__dirname, '../').length + 1);

//module.exports 配置
  productionSourceMap: false,  // 去掉dist 下的 map 文件
  chainWebpack: (config) => {
    if (process.env.NODE_ENV ===  'production') {
      config.plugin('compress')
        .use(FileManagerPlugin, [{
          onEnd: {
            delete: [
              './dist/*.zip'
            ],
            archive: [
              {
                source: './dist',
                destination: `./dist/dist-${ts}-${projectName}.zip`
              }
            ]
          }
        }]);
    }
  }
};

结果：执行npm run build 会在dist 文件夹下 自动生成 dist 压缩包

 

vue cli2 创建的项目

1. 安装包同上

2.修改 webpack.base.conf.js　

const path = require('path');

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

const date = require('silly-datetime');

const ts = date.format(new Date(), 'YYYYMMDDHHmmss');

// 路径根据自己项目修改

const projectName = __dirname.slice(path.resolve(__dirname, '../').length + 1);

plugins:[
    new FileManagerPlugin({
      onEnd:{
        delete:[
          './dist/*.zip',
        ],
        archive:[
          {
            source:'./dist',
            destination:`./dist/dist-${ts}-${projectName}.zip`
          },
        ]
      }
    })

  ]