const autoprefixer = require('autoprefixer');
const pxtoviewport = require('postcss-px-to-viewport');
const path = require('path');

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

module.exports = {
  publicPath: '/',
  lintOnSave: false,
  outputDir: 'dist',
  productionSourceMap: false,
  devServer: {
    https: false,
    host: '0.0.0.0',
    disableHostCheck: true,
  },
  css: {
    sourceMap: true,
   loaderOptions: {
      postcss: {
        postcssOptions: {
          plugins: [
            autoprefixer(), // 自动加浏览器前缀
            pxtoviewport({   // px 转 viewport
              viewportWidth: 375,
              selectorBlackList: ['van-circle__layer'] // 排除vant circle组件样式转换
            })
          ]
        }
      }
    }
  },
  chainWebpack: (config) => {
    // 设置路径别名
    config.resolve.alias
      .set('@', resolve('src'))
      .set('@utils', resolve('src/assets/js/utils'));

    // 移除 prefetch 插件（减少初始加载体积）
    config.plugins.delete('prefetch');

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

    // 处理 .mjs 文件（用于 mermaid 等模块）
    config.module
      .rule('mjs')
      .test(/\.mjs$/)
      .include.add(/node_modules/)
      .end()
      .use('babel-loader')
      .loader('babel-loader');

    // 添加对现代 JS 的支持（如 ?? 和 ?.）
    config.module
      .rule('js')
      .test(/\.js$/)
      .use('babel-loader')
      .loader('babel-loader')
      .options({
        presets: ['@babel/preset-env'],
      });
  },
  configureWebpack: (config) => {
    // 强制使用 CommonJS 模块加载 mermaid
    config.resolve = config.resolve || {};
    config.resolve.alias = config.resolve.alias || {};
    // config.resolve.alias.mermaid$ = path.resolve(
    //   __dirname,
    //   './node_modules/mermaid/dist/mermaid.common.js'
    // );

    // Webpack devtool 设置
    config.devtool = 'source-map';

    // 打包性能提示设置
    config.performance = {
      hints: 'error',
      maxEntrypointSize: 7168000, // 7MB
      maxAssetSize: 7168000, // 7MB
      assetFilter: function (assetFilename) {
        return assetFilename.endsWith('.js');
      },
    };
  },
};