vue中webpack配置compression-webpack-plugin打包压缩和优化，terser-webpack-plugin在构建过程中对 JavaScript 代码进行压缩和优化

const CompressionPlugin = require('compression-webpack-plugin');
const TerserPlugin = require('terser-webpack-plugin');
 
module.exports = {
  configureWebpack: config => {
    if (process.env.NODE_ENV === 'production') {
      // 为生产环境修改配置...
      return {
        plugins: [
          // 使用gzip压缩
          new CompressionPlugin({
            algorithm: 'gzip',
            test: /\.js(\?.*)?$/i,
            threshold: 10240,
            minRatio: 0.8,
          }),
        ],
        optimization: {
          minimize: true,
          minimizer: [
            new TerserPlugin({
              terserOptions: {
                compress: {
                  warnings: false,
                  drop_debugger: true, // 去除debugger
                  drop_console: true, // 去除console
                },
              },
              extractComments: false, // 是否将注释提取到单独的文件中
            }),
          ],
        },
      };
    }
  },
};

这段代码中，我们首先导入了compression-webpack-plugin和terser-webpack-plugin。然后，我们通过configureWebpack方法来配置webpack。在生产环境中，我们添加了CompressionPlugin插件来压缩输出的js文件，并通过optimization.minimizer使用TerserPlugin插件进行代码的压缩和优化，比如移除debugger和console语句。这样可以优化打包后的文件大小，提升加载速度。