// vue.config.js - 适配 Webpack 4 的版本
const path = require('path');

module.exports = {
  productionSourceMap: false,
  lintOnSave: false,
  
  // 转译这些包
  transpileDependencies: [
    'vue-router',
    'vue-draggable-next',
    'vuex',
    'element-plus'
  ],
  
  devServer: {
    port: 8080,
    overlay: false,
    hot: true
  },
  
  css: {
    sourceMap: true
  },
  
  configureWebpack: {
    module: {
      rules: [
        // 处理 .mjs 文件 - 简化版本，移除 fullySpecified
        {
          test: /\.mjs$/,
          include: /node_modules/,
          type: 'javascript/auto'
        },
        {
          test: /\.s[ac]ss$/,
          use: ['sass-loader']
        }
      ]
    },
    resolve: {
      extensions: ['.js', '.vue', '.json', '.mjs'],
      // Webpack 4 不支持 fullySpecified，移除或改为其他方式
      mainFields: ['module', 'main']  // 优先使用 ES 模块
    }
  },
  
  chainWebpack: (config) => {
    config.plugins.delete('prefetch');
    config.plugin('html').tap((args) => {
      args[0].title = 'WMS';
      return args;
    });
    
    // ========== 修复 Webpack 4 兼容性 ==========
    
    // 1. 删除有问题的规则（如果存在）
    config.module.rules.delete('mjs');
    
    // 2. 创建简化的 .mjs 处理规则
    config.module
      .rule('mjs')
      .test(/\.mjs$/)
      .include
        .add(/node_modules\/vue-router/)
        .add(/node_modules\/vue-draggable-next/)
        .add(/node_modules\/element-plus/)
        .end()
      .type('javascript/auto');
    
    // 3. 配置 JS 文件处理
    config.module
      .rule('js')
      .test(/\.js$/)
      .include
        .add(path.resolve(__dirname, 'src'))
        .add(/node_modules\/vue-router/)
        .add(/node_modules\/vue-draggable-next/)
        .add(/node_modules\/element-plus/)
        .add(/node_modules\/vuex/)
        .end()
      .use('babel-loader')
        .loader('babel-loader')
        .options({
          cacheDirectory: true,
          presets: [
            ['@babel/preset-env', {
              targets: {
                browsers: ['> 1%', 'last 2 versions', 'not dead'],
                node: '16.0.0'
              },
              modules: 'commonjs'  // Webpack 4 需要 commonjs
            }]
          ],
          plugins: [
            // 处理可选链操作符
            '@babel/plugin-proposal-optional-chaining',
            // 处理空值合并操作符
            '@babel/plugin-proposal-nullish-coalescing-operator'
          ]
        });
  }
};