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,
            }),
          ],
        },
      },
    },
  },
})
