const { merge } = require('webpack-merge')
const baseConfig = require('./webpack.base.js')
const CompressionPlugin = require("compression-webpack-plugin");
const { BundleAnalyzerPlugin } = require("webpack-bundle-analyzer");
const TerserPlugin = require("terser-webpack-plugin");
const CssMinimizerPlugin = require("css-minimizer-webpack-plugin");

module.exports = merge(baseConfig, {
  mode: 'production', // 生产模式,会开启 tree-shaking 和 压缩代码，以及其他优化
  output: {
    publicPath: './',
  },
  plugins: [
    // new BundleAnalyzerPlugin(),
    // 使用 CompressionPlugin 压缩静态资源
    new CompressionPlugin({
      algorithm: 'gzip', // 指定压缩算法
      test: /\.js(\?.*)?$/i, // 正则匹配需要压缩的文件
      threshold: 10240, // 对超过10k的数据进行压缩
      minRatio: 0.8, // 压缩比例
      deleteOriginalAssets: false, // 是否删除原文件
    }),
  ],
  optimization: {
    minimize: true,
    minimizer: [
      new TerserPlugin({
        terserOptions: {
          compress: {
            drop_console: process.env.NODE_ENV === 'production', // 移除所有的`console`语句
          },
          output: {
            comments: false, // 去掉注释
          },
        },
        extractComments: false, // 不从代码中提取注释
      }),
      new CssMinimizerPlugin(),
    ],
    splitChunks: { // 分隔代码
      cacheGroups: {
        vendors: { // 提取node_modules 代码
          test: /node_modules/, // 只匹配 node_modules 里面的模块
          name: 'vendors', // 提取文件命名为 vendors.js 后缀和 chunkhash 会自动加
          minChunks: 1, // 只要使用一次就提取出来
          chunks: 'initial', // 只提取初始化就能获取到的模块，不管异步的
          minSize: 0, // 提取代码体积大于0就提取出来
          priority: 1, // 提取优先级为1
        },
        commons: { // 提取页面公共代码
          name: 'commons', // 提取文件命名为 commons
          minChunks: 2, // 只要使用两次就提取出来
          chunks: 'initial', // 只提取初始化就能获取到的模块,不管异步的
          minSize: 0, // 提取代码体积大于0就提取出来
        }
      }
    },
  },
})