const path = require("path");

const resolve = (dir) => {
    return path.join(__dirname, dir);
};

// 项目部署基础
const BASE_URL = process.env.NODE_ENV === "development" ? "/" : "/";
const sourceMap = process.env.NODE_ENV === "development";
const ResponsiveLoaderSharp = require('responsive-loader/sharp');

module.exports = {
    publicPath: BASE_URL,
    lintOnSave: false, // 是否启用 eslint

    chainWebpack: (config) => {
        // 禁用 CaseSensitivePathsPlugin
        config.plugins.delete('case-sensitive-paths');
        
        // 别名
        config.resolve.alias.set("@", resolve("src"));
        config.resolve.alias.set("_c", resolve("src/components"));

        // SVG 文件处理
        config.module.rule('svg')
            .test(/\.svg$/)
            .use('file-loader')
            .loader('file-loader')
            .options({
                name: 'assets/svg/[name].[hash:8].[ext]'
            });

        // 普通图片处理（排除 SVG）
        config.module.rule('images')
            .test(/\.(png|jpe?g|gif)(\?.*)?$/)
            .use('url-loader')
            .loader('url-loader')
            .options({
                limit: 10000,
                esModule: false,
                outputPath: "images/"
            });

        // 图片压缩
        config.module.rule('images')
            .use('image-webpack-loader')
            .loader('image-webpack-loader')
            .options({
                bypassOnDebug: true,
                mozjpeg: { progressive: true, quality: 60 },
                optipng: { enabled: false },
                pngquant: { quality: [0.5, 0.6], speed: 4 },
                gifsicle: { interlaced: false },
                webp: { quality: 75 }
            });


      

        // config.module.rule('responsive-images')
        //     .test(/\.(png|jpe?g|gif)$/i)
        //     .use('responsive-loader')
        //     .loader('responsive-loader')
        //     .options({
        //         adapter: ResponsiveLoaderSharp,
        //         sizes: [1200, 1920], // 超过宽度会生成缩小版本
        //         quality: 75,
        //         name: 'images/[name]-[width].[ext]',
        //         placeholder: false
        //     });

    },

    configureWebpack: {
        output: {
            filename: "js/[hash].js",
        }
    },

    css: {
        loaderOptions: {
            postcss: {
                postcssOptions: {
                    plugins: [
                        require('autoprefixer'),
                        require('postcss-pxtorem')({
                            rootValue: 16,
                            propList: ['*'],
                            selectorBlackList: [],
                            replace: true,
                            mediaQuery: false,
                            minPixelValue: 1,
                            exclude: /node_modules/i
                        })
                    ]
                }
            },
            less: {
                lessOptions: {
                    javascriptEnabled: true,
                    modifyVars: {
                        '@primary-color': '#3498db',
                        '@success-color': '#52c41a',
                        '@warning-color': '#faad14',
                        '@error-color': '#f5222d',
                        '@font-size-base': '14px',
                        '@heading-color': '#262626',
                        '@text-color': '#595959',
                        '@text-color-secondary': '#8c8c8c',
                        '@disabled-color': '#bfbfbf',
                        '@border-radius-base': '4px',
                        '@border-color-base': '#d9d9d9',
                        '@box-shadow-base': '0 2px 8px rgba(0, 0, 0, 0.15)'
                    }
                }
            }
        }
    },

    productionSourceMap: sourceMap,
};