// 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(), // 只更新單個(gè)修改文件
      new NodePolyfillPlugin(),
      new CompressionPlugin({
        test: /\.js$|\.html$|.\css/, // 匹配文件名
        threshold: 10240, // 對(duì)超過(guò)10k的數(shù)據(jù)壓縮
        algorithm: 'gzip', // 使用gzip壓縮
        deleteOriginalAssets: false // 不刪除源文件
        // minRatio: 0.8 // 壓縮比例
      })
    ],
    resolve: {
      extensions: ['.js', '.css', '.jsx'], // 自動(dòng)補(bǔ)全識(shí)別后綴
      alias: {
        assets: '@/assets',
        components: '@/components',
        views: '@/views',
        'vue-i18n': 'vue-i18n/dist/vue-i18n.cjs.js'
      }
    },
    optimization: {
      splitChunks: {
        // **`splitChunks.chunks: 'async'`**。表示哪些類(lèi)型的chunk會(huì)參與split。默認(rèn)是異步加載的chunk鹏溯。值還可以是`initial`（表示入口同步chunk）痴脾、`all`（相當(dāng)于`initial`+`async`）。
        chunks: 'async',
        // minSize 表示符合代碼分割產(chǎn)生的新生成chunk的最小大小。默認(rèn)是大于30kb的才會(huì)生成新的chunk
        minSize: 400 * 1024,
        // maxSize 表示webpack會(huì)嘗試將大于maxSize的chunk拆分成更小的chunk，拆解后的值需要大于minSize
        maxSize: 0,
        // 一個(gè)模塊被最少多少個(gè)chunk共享時(shí)參與split
        minChunks: 1,
        // 最大異步請(qǐng)求數(shù)。該值可以理解為一個(gè)異步chunk衷蜓，被抽離出同時(shí)加載的chunk數(shù)不超過(guò)該值。若為1尘喝，該異步chunk將不會(huì)抽離出任意代碼塊
        maxAsyncRequests: 5,
        // 入口chunk最大請(qǐng)求數(shù)磁浇。在多entry chunk的情況下會(huì)用到，表示多entry chunk公共代碼抽出的最大同時(shí)加載的chunk數(shù)
        maxInitialRequests: 3,
        // 初始chunk最大請(qǐng)求數(shù)朽褪。
        // 多個(gè)chunk拆分出小chunk時(shí)置吓，這個(gè)chunk的名字由多個(gè)chunk與連接符組合成
        automaticNameDelimiter: '~',
        // cacheGroups 表示分包分組規(guī)則，每一個(gè)分組會(huì)繼承于default
        // priority表示優(yōu)先級(jí)缔赠，一個(gè)chunk可能被多個(gè)分組規(guī)則命中時(shí)衍锚，會(huì)使用優(yōu)先級(jí)較高的
        // test提供時(shí) 表示哪些模塊會(huì)被抽離
        enforceSizeThreshold: 50000,
        cacheGroups: {
          defaultVendors: {
            filename: 'js/[name]/bundle.js',
            test: /[\\/]node_modules[\\/]/,
            priority: -10
          },
          default: {
            minChunks: 2,
            priority: -20,
            // 復(fù)用已經(jīng)生成的chunk
            reuseExistingChunk: true
          }
        }
      }
    }
  },
  devServer: {
    // 反向代理
    // hot: true,proxyproxy
    // index: '/login.html', // 默認(rèn)打開(kāi)文件
    // open: true, // 自動(dòng)打開(kāi)瀏覽器
    // host: 'localhost', // 默認(rèn)打開(kāi)域名
    // port: 8080, // 默認(rèn)打開(kāi)端口號(hào)
    // https: false, // 開(kāi)啟關(guān)閉https請(qǐng)求
    // hotOnly: false, // 熱更
    proxy: {
    // 配置跨域
      '/api': {
        target: process.env.VUE_APP_URL, // 代理地址，這里設(shè)置的地址會(huì)代替axios中設(shè)置的baseURL
        ws: false, /// / proxy websockets
        changeOrigin: true, // 如果接口跨域嗤堰，需要進(jìn)行這個(gè)參數(shù)配置
        pathRewrite: { // pathRewrite方法重寫(xiě)url
          '^/api': '/'
        }
      },
      '/api2': {
        target: process.env.VUE_APP_URL_BIAN, // 代理地址戴质，這里設(shè)置的地址會(huì)代替axios中設(shè)置的baseURL
        ws: false, /// / proxy websockets
        changeOrigin: true, // 如果接口跨域，需要進(jìn)行這個(gè)參數(shù)配置
        pathRewrite: { // pathRewrite方法重寫(xiě)url
          '^/api2': '/'
        }
      }
    }
  },
  pluginOptions: {
    'style-resources-loader': {
      preProcessor: 'less',
      patterns: [
        // 這個(gè)是加上自己的路徑,不能使用(如下:alias)中配置的別名路徑
        path.resolve(__dirname, './src/theme/style.less'),
        path.resolve(__dirname, './src/assets/css/public.less')
      ]
    }
  },
  // 不需要打包后定位問(wèn)題 就設(shè)置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圖像
        // 當(dāng)圖片小于1024的時(shí)候會(huì)把圖片轉(zhuǎn)為base64格式
        limit: 1024,
        // [name]代表圖片名稱(chēng)踢匣；[hash:8]代表8位自動(dòng)生成的哈希值告匠；[ext]代表圖片的后綴名
        name: 'img/[name].[hash:4].[ext]',
        // 此處為ture的時(shí)候不會(huì)啟用壓縮處理,目的是為了開(kāi)發(fā)模式下調(diào)試速度更快
        disable: process.env.NODE_ENV !== 'production'
      })
      .end()
  }
})