const path = require("path");
const CopyWebpackPlugin = require('copy-webpack-plugin');

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"));

        // 统一图片产物目录：dist/images（保留子目录，不带 hash）
        // 说明：Vue CLI 默认会把被打包的图片输出到 dist/img（带 hash），
        // 这里覆盖为与 CopyWebpackPlugin 一致的 images 目录，避免出现 dist/img。
        config.module.rule('images')
            .test(/\.(png|jpe?g|gif|webp)(\?.*)?$/)
            .use('url-loader')
            .loader('url-loader')
            .options({
                limit: 10000,
                esModule: false,
                outputPath: 'images',
                context: resolve('src/assets/img'),
                name: '[path][name].[ext]'
            });

        config.module.rule('svg')
            .test(/\.svg$/)
            .use('file-loader')
            .loader('file-loader')
            .options({
                context: resolve('src/assets/img'),
                name: 'images/[path][name].[ext]'
            });
    },

    configureWebpack: {
        plugins: [
            new CopyWebpackPlugin([
                {
                    from: resolve('src/assets/img'),
                    to: 'images'
                }
            ])
        ],
        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,
};