/** @format */

import { defineConfig, loadEnv, UserConfig } from "vite";
import react from "@vitejs/plugin-react";
import { resolve } from "path";
import viteCompression from "vite-plugin-compression";
import { createHtmlPlugin } from "vite-plugin-html";
import legacy from "@vitejs/plugin-legacy";
import postcssPresetEnv from "postcss-preset-env";
import autoprefixer from "autoprefixer";
import { nodePolyfills } from "vite-plugin-node-polyfills";
import svgr from "vite-plugin-svgr";
export default defineConfig(({ mode }): any => {
	const env = loadEnv(mode, process.cwd());
	return {
		base: "/",
		plugins: [
			react(),
			nodePolyfills(),
			svgr({ svgrOptions: { icon: true } }),
			legacy({
				targets: [
					"ie >= 11",
					"chrome 52",
					"Chrome > 70",
					"Safari  12.1",
					"last 2 versions and since 2018 and > 0.5%",
					"iOS >= 9",
					"Android >= 4.4",
					"last 2 versions",
				],
				additionalLegacyPolyfills: ["regenerator-runtime/runtime"],
				renderLegacyChunks: true,
				polyfills: [
					"es.promise.all-settled",
					"es.symbol",
					"es.array.filter",
					"es.promise",
					"es.promise.finally",
					"es/map",
					"es/set",
					"es.array.for-each",
					"es.object.define-properties",
					"es.object.define-property",
					"es.object.get-own-property-descriptor",
					"es.object.get-own-property-descriptors",
					"es.object.keys",
					"es.object.to-string",
					"web.dom-collections.for-each",
					"esnext.global-this",
					"esnext.string.match-all",
				],
				modernPolyfills: ["es.promise.all-settled", "es.object.entries"],
			}),
			viteCompression({
				verbose: true, // 是否在控制台中输出压缩结果
				disable: false,
				threshold: 10240, // 如果体积大于阈值，将被压缩，单位为b，体积过小时请不要压缩，以免适得其反
				algorithm: "gzip", // 压缩算法，可选['gzip'，' brotliccompress '，'deflate '，'deflateRaw']
				ext: ".gz",
				deleteOriginFile: true, // 源文件压缩后是否删除
			}),
			createHtmlPlugin({
				minify: true,
				/**
				 * 在这里写entry后，你将不需要在`index.html`内添加 script 标签，原有标签需要删除
				 * @default src/main.ts
				 */
				entry: "src/main.tsx",
				/**
				 * 如果你想将 `index.html`存放在指定文件夹，可以修改它，否则不需要配置
				 * @default index.html
				 */
				template: "index.html",
				/**
				 * 需要注入 index.html ejs 模版的数据
				 */
				inject: {
					data: {
						title: env.VITE_TITLE_NAME,
					},
				},
			}),
		],
		resolve: {
			alias: {
				"@": resolve(__dirname, "src"),
			},
			extensions: [".mjs", ".js", ".ts", ".jsx", ".tsx", ".json"], // 默认值，这些文件引入时不需要写后缀
		},
		css: {
			modules: {
				// 一般我们可以通过 generateScopedName 属性来对生成的类名进行自定义
				// 其中，name 表示当前文件名，local 表示类名
				generateScopedName: "[name]__[local]___[hash:base64:5]",
			},
			postcss: {
				plugins: [
					postcssPresetEnv(),
					autoprefixer({
						// 自动添加前缀
						overrideBrowserslist: [
							"Android 4.1",
							"iOS 7.1",
							"Chrome > 31",
							"ff > 31",
							"ie >= 8",
						],
					}),
				],
			},
			preprocessorOptions: {
				less: {
					javascriptEnabled: true,
				},
			},
		},
		esbuild: {
			// drop: ["console", "debugger"],
		},
		build: {
			outDir: "dist", // 指定输出路径
			assetsDir: "assets", // 指定生成静态文件目录
			assetsInlineLimit: "4096", // 小于此阈值的导入或引用资源将内联为 base64 编码
			cssCodeSplit: true, // 启用 CSS 代码拆分
			sourcemap: false, // 构建后是否生成 source map 文件
			minify: "esbuild", // 指定使用哪种混淆器
			write: true, // 启用将构建后的文件写入磁盘
			emptyOutDir: true, // 构建时清空该目录
			brotliSize: true, // 启用 brotli 压缩大小报告
			chunkSizeWarningLimit: 4000, // chunk 大小警告的限制
			watch: null, // 设置为 {} 则会启用 rollup 的监听器
			rollupOptions: {
				output: {
					// manualChunks 配置
					manualChunks: {
						// 将 React 相关库打包成单独的 chunk 中
						"react-vendor": ["react", "react-dom"],
						// 将组件库的代码打包
						library: [
							"antd",
							"@ant-design/icons",
							"@ant-design/pro-components",
							"@ant-design/use-emotion-css",
						],
					},
				},
			},
		},
		server: {
			proxy: {
				[env.VITE_APP_BASE_API]: {
					//后端接口的baseurl
					target: env.VITE_API_BASE_URL,
					//是否允许跨域
					changeOrigin: true,
					rewrite: (path) => path.replace(RegExp(`^${env.VITE_APP_BASE_API}`), ""),
				},
			},
		},
	};
});