import { defineConfig, loadEnv } from 'vite'
import react from '@vitejs/plugin-react'
import { resolve } from 'path'
// icons plugin
import { createSvgIconsPlugin } from 'vite-plugin-svg-icons'
import * as path from 'path'
import imagemin from 'unplugin-imagemin/vite'
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'
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-expect-error
//配置参数
export default defineConfig(({ mode }) => {
    const env = loadEnv(mode, process.cwd())
    return {
        base: '/',
        plugins: [
            react(),
            legacy({
                targets: ['defaults', 'ie >= 11', 'chrome 52'],
                additionalLegacyPolyfills: ['regenerator-runtime/runtime'],
            }),
            // 修改 icons 相关配置
            createSvgIconsPlugin({
                // 指定需要缓存的图标文件夹
                iconDirs: [path.resolve(__dirname, './src/assets/icons')],
                // 指定symbolId格式
                symbolId: 'icon-[dir]-[name]',
            }),
            imagemin({
                // Default mode sharp. support squoosh and sharp
                mode: 'sharp',
                beforeBundle: true,
                // Default configuration options for compressing different pictures
                compress: {
                    jpg: {
                        quality: 10,
                    },
                    jpeg: {
                        quality: 10,
                    },
                    png: {
                        quality: 10,
                    },
                    webp: {
                        quality: 10,
                    },
                },
                conversion: [
                    { from: 'jpeg', to: 'webp' },
                    { from: 'png', to: 'webp' },
                    { from: 'JPG', to: 'jpeg' },
                ],
            }),
            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,
                },
            },
        },
        build: {
            // target: ['es2015'], // 设置最终构建的浏览器兼容目标
            moduleResolution: 'node', // 决定如何处理模块。
            outDir: 'dist', // 指定输出路径
            assetsDir: 'assets', // 指定生成静态文件目录
            assetsInlineLimit: '4096', // 小于此阈值的导入或引用资源将内联为 base64 编码
            cssCodeSplit: true, // 启用 CSS 代码拆分
            // cssTarget: '', // 允许用户为 CSS 的压缩设置一个不同的浏览器 target 与 build.target 一致
            sourcemap: false, // 构建后是否生成 source map 文件

            // lib: {}, // 构建为库
            manifest: false, // 当设置为 true，构建后将会生成 manifest.json 文件
            ssrManifest: false, // 构建不生成 SSR 的 manifest 文件
            ssr: undefined, // 生成面向 SSR 的构建
            minify: 'terser', // 指定使用哪种混淆器
            // 传递给 Terser 的更多 minify 选项
            terserOptions: {
                compress: {
                    drop_console: true,
                    drop_debugger: true,
                },
            },
            write: true, // 启用将构建后的文件写入磁盘
            emptyOutDir: true, // 构建时清空该目录
            brotliSize: true, // 启用 brotli 压缩大小报告
            chunkSizeWarningLimit: 2000, // chunk 大小警告的限制
            watch: null, // 设置为 {} 则会启用 rollup 的监听器
            rollupOptions: {
                // 自定义底层的 Rollup 打包配置
                output: {
                    chunkFileNames: 'js/[name]-[hash].js', // 引入文件名的名称
                    entryFileNames: 'js/[name]-[hash].js', // 包的入口文件名称
                    assetFileNames: '[ext]/[name]-[hash].[ext]', // 资源文件像 字体，图片等
                    manualChunks(id) {
                        if (id.includes('node_modules')) {
                            return id.toString().split('node_modules/')[1].split('/')[0].toString()
                        }
                    },
                },
            },
        },
    }
})