const {defineConfig} = require('@vue/cli-service')
const postcssPxToViewport = require('postcss-px-to-viewport')
const path = require('path')

module.exports = defineConfig({
  publicPath: './',
  transpileDependencies: false, // 我们自己管，不让 CLI 插手
  lintOnSave: false,
  devServer: {client: {overlay: false}},

  configureWebpack(config) {
    // 调试
    config.devtool = 'source-map'
    // 别名
    config.resolve.alias['@'] = path.resolve(__dirname, 'src')

    /* 1. 追加 ini 规则 */
    config.module.rules.push({
      test: /\.ini$/,
      use: 'raw-loader',
    })

    /* 2. 追加 ES5 规则（只转 src，不转 node_modules） */
    config.module.rules.push({
      test: /\.js$/,
      include: path.resolve(__dirname, 'src'),
      use: {
        loader: 'babel-loader',
        options: {
          presets: [
            [
              '@babel/preset-env',
              {
                targets: {ie: '11'}, // 强制 ES5
                corejs: 3,
                useBuiltIns: 'entry',
              },
            ],
          ],
        },
      },
    })
  },

  css: {
    /* 你的 px-to-viewport 配置不动 */
    loaderOptions: {
      postcss: {
        postcssOptions: {
          plugins: [
            postcssPxToViewport({
              unitToConvert: 'px',
              viewportWidth: 1920,
              unitPrecision: 6,
              viewportUnit: 'vw',
              fontViewportUnit: 'vw',
              propList: ['*'],
              selectorBlackList: ['ignore-'],
              minPixelValue: 1,
              mediaQuery: false,
              replace: true,
              exclude: /node_modules/,
              include: [],
              landscape: false,
            }),
          ],
        },
      },
    },
  },
})