const moment = require('moment');
const TerserPlugin = require('terser-webpack-plugin')
const FileManageerPlugin = require('filemanager-webpack-plugin');
const CompressionPlugin = require("compression-webpack-plugin");

module.exports = {
  //打包去掉console.log (通过npm包 terser-webpack-plugin 来实现)
  
  configureWebpack: (config) => {
    if (process.env.NODE_ENV === 'production') {
      config.optimization.minimizer[0].options.terserOptions.compress.drop_console = true;
      const plugins = [];
      const fileTimeName = moment().format('YYYY-MM-DD-HHmm');
      plugins.push(
        new TerserPlugin({
          terserOptions: {
            compress: {
              drop_console: true,
              drop_debugger: true
            }
          },
          cache: true, // 启用文件缓存
          parallel: true // 使用多进程并行运行来提高构建速度
          // sourceMap: false // 映射错误信息到模块
        })
      )
      plugins.push(
        new FileManageerPlugin({
          onEnd: {
            //创建目录
            mkdir: ['./tempzip/' + 'dist'],
            //复制文件到tempzip
            copy: [{
              source: './dist',
              destination: './tempzip/' + 'dist'
            },],
            //打包temzip,输出到根目录下
            archive: [{
              source: './tempzip/',
              destination: `admin-web-time:${fileTimeName}.zip`
            }],
            //删除tempzip
            delete: [
              './tempzip/'
            ]
          }
        })
      );
      config.plugins = [
        ...config.plugins,
        ...plugins
      ]
    }
  },
  chainWebpack: (config) => {
    config.module.rule('js').use('babel-loader')
    config.entry('main').add('babel-polyfill')
    // 开启图片压缩
    config.module.rule('images')
      .test(/\.(png|gif|jpe?g|svg)(\?.*)?$/)
      .use('image-webpack-loader')
      .loader('image-webpack-loader')
      .options({
        bypassOnDebug: true
      })
      .tap(options => Object.assign(options, {
        limit: 6140
      }))
    // 开启js、css压缩
    if (process.env.NODE_ENV === 'production') {
      config.plugin('compressionPlugin')
        .use(new CompressionPlugin({
          test: /\.js$|\.html$|.\css/, // 匹配文件名
          threshold: 10240, // 对超过10k的数据压缩
          deleteOriginalAssets: false // 不删除源文件
        }))
    }

  },
  productionSourceMap: false,
  publicPath: process.env.BASE_URL,
  outputDir: 'dist', // 运行时生成的生产环境构建文件的目录(默认''dist'',构建之前会被清除)
  indexPath: 'home.html', //指定生成的 home.html 的输出路径(相对于 outputDir)也可以是一个绝对路径。
  assetsDir: './' +  new Date().getTime() + '/static',
  lintOnSave: false, // 是否在保存的时候检查
   configureWebpack: config => {
    // 公共代码抽离以及文件夹时间戳实现无缓存
    config.optimization = {
      splitChunks: {
        cacheGroups: {
          vendor: {
            chunks: 'all',
            test: /node_modules/,
            name: 'vendor',
            minChunks: 1,
            maxInitialRequests: 5,
            minSize: 0,
            priority: 100
          },
          common: {
            chunks: 'all',
            test: /[\\/]src[\\/]js[\\/]/,
            name: 'common',
            minChunks: 2,
            maxInitialRequests: 5,
            minSize: 0,
            priority: 60
          },
          styles: {
            name: 'styles',
            test: /\.(sa|sc|c)ss$/,
            chunks: 'all',
            enforce: true
          },
          runtimeChunk: {
            name: 'manifest'
          }
        }
      }
    }
  },
  devServer: { // 环境配置
    // host: '192.168.2.42',
    port: 8086,
    https: false,
    hotOnly: false,
    open: true, //配置自动启动浏览器
    proxy: {
      '/api': {
        target: "http://xxxxxxxxx.com/",
        changeOrigin: true,
        pathRewrite: {
          '^/api': ''
        }
      }
    },
  },
};

这样打包后得压缩文件夹就是admin-web-time:2021-03-15-1452.zip 这样就不会再让后端搞混了

Logo

前往低代码交流专区

更多推荐