const path = require('path');
const CompressionPlugin = require('compression-webpack-plugin');

function resolve(dir) {
    return path.join(__dirname, dir);
}

const name = process.env.VUE_APP_TITLE || '水运工程设计施工AR应用平台';
const baseUrl = 'http://127.0.0.1:58080';
const port = process.env.port || process.env.npm_config_port || 80;

module.exports = {
    publicPath: process.env.NODE_ENV === 'production' ? '/' : '/',
    outputDir: 'dist',
    assetsDir: 'static',
    productionSourceMap: false,
    transpileDependencies: ['quill'],
    devServer: {
        host: '0.0.0.0',
        port: port,
        open: true,
        proxy: {
            [process.env.VUE_APP_BASE_API]: {
                target: baseUrl,
                changeOrigin: true,
                pathRewrite: {
                    ['^' + process.env.VUE_APP_BASE_API]: '',
                },
            },
            '^/v3/api-docs/(.*)': {
                target: baseUrl,
                changeOrigin: true,
            },
        },
        disableHostCheck: true,
    },
    css: {
        loaderOptions: {
            sass: {
                sassOptions: { outputStyle: 'expanded' },
            },
        },
    },
    configureWebpack: {
        name: name,
        resolve: {
            alias: {
                '@': resolve('src'),
            },
        },
        plugins: [
            new CompressionPlugin({
                cache: false,
                test: /\.(js|css|html|jpe?g|png|gif|svg)?$/i,
                filename: '[path][base].gz[query]',
                algorithm: 'gzip',
                minRatio: 0.8,
                deleteOriginalAssets: false,
            }),
        ],
    },
    chainWebpack(config) {
        config.module
            .rule('mjs')
            .test(/\.mjs$/)
            .include.add(/node_modules/)
            .end()
            .type('javascript/auto');

        // 原有 svg-sprite 处理
        config.plugins.delete('preload');
        config.plugins.delete('prefetch');

        config.module.rule('svg').exclude.add(resolve('src/assets/icons')).end();
        config.module
            .rule('icons')
            .test(/\.svg$/)
            .include.add(resolve('src/assets/icons'))
            .end()
            .use('svg-sprite-loader')
            .loader('svg-sprite-loader')
            .options({
                symbolId: 'icon-[name]',
            });

        // 生产环境优化配置
        config.when(process.env.NODE_ENV !== 'development', (config) => {
            config
                .plugin('ScriptExtHtmlWebpackPlugin')
                .after('html')
                .use('script-ext-html-webpack-plugin', [
                    {
                        inline: /runtime\..*\.js$/,
                    },
                ])
                .end();

            config.optimization.splitChunks({
                chunks: 'all',
                cacheGroups: {
                    libs: {
                        name: 'chunk-libs',
                        test: /[\\/]node_modules[\\/]/,
                        priority: 10,
                        chunks: 'initial',
                    },
                    elementUI: {
                        name: 'chunk-elementUI',
                        test: /[\\/]node_modules[\\/]_?element-ui(.*)/,
                        priority: 20,
                    },
                    commons: {
                        name: 'chunk-commons',
                        test: resolve('src/components'),
                        minChunks: 3,
                        priority: 5,
                        reuseExistingChunk: true,
                    },
                },
            });
            config.optimization.runtimeChunk('single');
        });
    },
};