const Components = require('unplugin-vue-components/webpack');
const AutoImport = require('unplugin-auto-import/webpack');
const { ElementPlusResolver } = require('unplugin-vue-components/resolvers');

const CompressionPlugin = require('compression-webpack-plugin');

module.exports = {
  productionSourceMap: false,
  publicPath: './',
  chainWebpack: config => {
    if (process.env.NODE_ENV === 'production') {
      config.plugin('compressionPlugin').use(
        new CompressionPlugin({
          test: /\.js$|\.css|\.less/, // 匹配文件名
          threshold: 102400, // 对超过10k的数据压缩
          deleteOriginalAssets: false, // 不删除源文件
        })
      );
      // 移除 prefetch 插件
      config.plugins.delete('prefetch');

      config.module.rules = [
        {
          test: /\.s[ac]ss$/i,
          use: [
            // 将 Sass 编译成 CSS
            {
              loader: 'sass-loader',
              options: {
                sassOptions: {
                  strictMath: true,
                  noIeCompat: true,
                },
              },
            },
          ],
        },
      ];
    }
  },
  configureWebpack: {
    plugins: [
      AutoImport({
        resolvers: [ElementPlusResolver()],
      }),
      Components({
        resolvers: [ElementPlusResolver()],
      }),
    ],
  },
};