// vue.config.js
const { defineConfig } = require('@vue/cli-service')
const { VantResolver } = require('unplugin-vue-components/resolvers')
const ComponentsPlugin = require('unplugin-vue-components/webpack')
const NodePolyfillPlugin = require('node-polyfill-webpack-plugin') // web3处理polyfill
const CompressionPlugin = require('compression-webpack-plugin')// 压缩
// const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer') // 查看大小
const path = require('path')
const webpack = require('webpack')
module.exports = defineConfig({
  transpileDependencies: true,
  lintOnSave: true,
  publicPath: './',
  outputDir: 'h5',
  configureWebpack: {
    plugins: [
      ComponentsPlugin({
        resolvers: [VantResolver()]
      }),
      // new BundleAnalyzerPlugin(),
      new webpack.HotModuleReplacementPlugin(), // 只更新单个修改文件
      new NodePolyfillPlugin(),
      new CompressionPlugin({
        test: /\.js$|\.html$|.\css/, // 匹配文件名
        threshold: 10240, // 对超过10k的数据压缩
        algorithm: 'gzip', // 使用gzip压缩
        deleteOriginalAssets: false // 不删除源文件
        // minRatio: 0.8 // 压缩比例
      })
    ],
    resolve: {
      extensions: ['.js', '.css', '.jsx'], // 自动补全识别后缀
      alias: {
        assets: '@/assets',
        components: '@/components',
        views: '@/views',
        'vue-i18n': 'vue-i18n/dist/vue-i18n.cjs.js'
      }
    },
    optimization: {
      splitChunks: {
        // **`splitChunks.chunks: 'async'`**。表示哪些类型的chunk会参与split。默认是异步加载的chunk。值还可以是`initial`（表示入口同步chunk）、`all`（相当于`initial`+`async`）。
        chunks: 'async',
        // minSize 表示符合代码分割产生的新生成chunk的最小大小。默认是大于30kb的才会生成新的chunk
        minSize: 400 * 1024,
        // maxSize 表示webpack会尝试将大于maxSize的chunk拆分成更小的chunk，拆解后的值需要大于minSize
        maxSize: 0,
        // 一个模块被最少多少个chunk共享时参与split
        minChunks: 1,
        // 最大异步请求数。该值可以理解为一个异步chunk，被抽离出同时加载的chunk数不超过该值。若为1，该异步chunk将不会抽离出任意代码块
        maxAsyncRequests: 5,
        // 入口chunk最大请求数。在多entry chunk的情况下会用到，表示多entry chunk公共代码抽出的最大同时加载的chunk数
        maxInitialRequests: 3,
        // 初始chunk最大请求数。
        // 多个chunk拆分出小chunk时，这个chunk的名字由多个chunk与连接符组合成
        automaticNameDelimiter: '~',
        // cacheGroups 表示分包分组规则，每一个分组会继承于default
        // priority表示优先级，一个chunk可能被多个分组规则命中时，会使用优先级较高的
        // test提供时 表示哪些模块会被抽离
        enforceSizeThreshold: 50000,
        cacheGroups: {
          defaultVendors: {
            filename: 'js/[name]/bundle.js',
            test: /[\\/]node_modules[\\/]/,
            priority: -10
          },
          default: {
            minChunks: 2,
            priority: -20,
            // 复用已经生成的chunk
            reuseExistingChunk: true
          }
        }
      }
    }
  },
  devServer: {
    // 反向代理
    // hot: true,proxyproxy
    // index: '/login.html', // 默认打开文件
    // open: true, // 自动打开浏览器
    // host: 'localhost', // 默认打开域名
    // port: 8080, // 默认打开端口号
    // https: false, // 开启关闭https请求
    // hotOnly: false, // 热更
    proxy: {
    // 配置跨域
      '/api': {
        target: process.env.VUE_APP_URL, // 代理地址，这里设置的地址会代替axios中设置的baseURL
        ws: false, /// / proxy websockets
        changeOrigin: true, // 如果接口跨域，需要进行这个参数配置
        pathRewrite: { // pathRewrite方法重写url
          '^/api': '/'
        }
      },
      '/api2': {
        target: process.env.VUE_APP_URL_BIAN, // 代理地址，这里设置的地址会代替axios中设置的baseURL
        ws: false, /// / proxy websockets
        changeOrigin: true, // 如果接口跨域，需要进行这个参数配置
        pathRewrite: { // pathRewrite方法重写url
          '^/api2': '/'
        }
      }
    }
  },
  pluginOptions: {
    'style-resources-loader': {
      preProcessor: 'less',
      patterns: [
        // 这个是加上自己的路径,不能使用(如下:alias)中配置的别名路径
        path.resolve(__dirname, './src/theme/style.less'),
        path.resolve(__dirname, './src/assets/css/public.less')
      ]
    }
  },
  // 不需要打包后定位问题 就设置false
  productionSourceMap: false,
  // 配置title
  chainWebpack: (config) => {
    config.plugin('define').tap((args) => {
      args[0].process = { ...args[0]['process.env'] }
      return args
    })
    config.plugin('html').tap((args) => {
      args[0].title = 'Knight Trade'
      return args
    })
    // 压缩图片
    config.module
      .rule('image')
      .test(/\.(png|jpe?g)(\?.*)?$/)
      .use('image-webpack-loader')
      .loader('image-webpack-loader')
      .options({
        // mozjpeg: { progressive: true, quality: 50 }, // 压缩JPEG图像
        // optipng: { enabled: true }, // 压缩PNG图像
        // pngquant: { quality: [0.5, 0.65], speed: 4 }, // 压缩PNG图像
        // gifsicle: { interlaced: false }, // 压缩GIF图像
        // 当图片小于1024的时候会把图片转为base64格式
        limit: 1024,
        // [name]代表图片名称；[hash:8]代表8位自动生成的哈希值；[ext]代表图片的后缀名
        name: 'img/[name].[hash:4].[ext]',
        // 此处为ture的时候不会启用压缩处理,目的是为了开发模式下调试速度更快
        disable: process.env.NODE_ENV !== 'production'
      })
      .end()
  }
})