const { defineConfig } = require('@vue/cli-service');
// 绝对路径引用
const path = require("path");
// 是否生产环境
const isPro = process.env.NODE_ENV == "production";
// 打包体积分析
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
module.exports = defineConfig({
  transpileDependencies: true,
  publicPath: process.env.BASE_URL,
  assetsDir: "static",
  outputDir: process.env.VUE_APP_OUT_PUT_DIR || 'dist',
  productionSourceMap: isPro,
  configureWebpack: config => {
    config.output.path = path.resolve(__dirname, process.env.VUE_APP_OUT_PUT_DIR);
    config.output.filename = "static/js/[name].js";
    config.output.chunkFilename = "static/js/[name].js";
  },
  chainWebpack: config => {
    config.when(isPro, _config => {
      // 去除浏览器预加载
      _config.plugins.delete('preload');
      _config.plugins.delete('prefetch');
      // 关闭打包超出压缩率警告
      _config.performance.hints(false);
      // 压缩文件
      _config.optimization.minimize(true);
      // 深度分割
      _config.optimization.splitChunks({
        chunks: 'async',
        minSize: 30000, // 允许新拆出 chunk 的最小体积
        maxSize: 0, // 旨在与 HTTP/2 和长期缓存一起使用。它增加了请求数量以实现更好的缓存。它还可以用于减小文件大小，以加快二次构建速度。
        minChunks: 1, // 拆分前被 chunk 公用的最小次数
        maxAsyncRequests: 5, // 每个异步加载模块最多能被拆分的数量
        maxInitialRequests: 3, // 每个入口和它的同步依赖最多能被拆分的数量
        automaticNameDelimiter: '~',
        cacheGroups: {
          libs: {
            name: 'main-chunk`',
            test: /[\\/]node_modules[\\/]/,
            priority: -10,
            chunks: 'all'
          },
          elementUI: {
            name: 'element-ui',
            priority: 0,
            test: /[\\/]element-ui[\\/]/,
            chunks: "all"
          },
          commons: {
            name: 'chunk-commons',
            test: path.resolve(__dirname, "/src/components"),
            minChunks: 2,
            priority: -20,
            reuseExistingChunk: true
          },
        }
      });
      // 缓存持久化
      _config.optimization.runtimeChunk("single");
      // 图片压缩
      _config.module
        .rule('images')
        .test(/\.(png|jpe?g|gif|svg)(\?.*)?$/)
        .use('image-webpack-loader')
        .loader('image-webpack-loader')
        .options({
          bypassOnDebug: true
        })
        .end();
      // 开启gzip压缩
      _config
        .plugin('CompressionPlugin')
        .use('compression-webpack-plugin', [{
          test: /\.js$|\.css$|\.html$/, // gzip压缩规则
          threshold: 10240, // 大于10K的数据会被压缩
          filename: '[path][base].gz',
          algorithm: 'gzip', // 压缩方式
          minRatio: 1, // 压缩比小于这个的才压缩
          deleteOriginalAssets: false,
        }])
        .end();
      // 添加打包体积分析
      _config.plugin("webpack-bundle-analyzer").use(BundleAnalyzerPlugin).end();
    });
  },
  // 本地代理服务器
  // devServer: {
  //   overlay: {
  //     warnings: true,
  //     errors: true
  //   },
  //   host: '0.0.0.0',
  //   port: 6666,
  //   open: true,
  //   proxy: {
  //     [process.env.VUE_APP_BASE_API]: {
  //       target: ``,
  //       changeOrigin: true,
  //       pathRewrite: {
  //         ['^' + process.env.VUE_APP_BASE_API]: ''
  //       }
  //     },
  //   },
  //   disableHostCheck: true
  // },
});
