// 此文件的修改要重启应用
// npm i -D @craco/craco babel-plugin-import
const path = require('path')
const fs = require('fs')
// const homeFn = require('./mock/home')

// 自动导入mock下面的js文件
// 定义一个对象用来标记哪些文件已被加载
const loadFileMap = new Map()
// 读取mock下面的js文件
const mockDirPath = path.resolve('./mock')
const files = fs.readdirSync(mockDirPath)
files.forEach((file) => {
  if (!loadFileMap.has(file)) {
    const filePath = path.join(mockDirPath, file)
    loadFileMap.set(file, require(filePath))
  }
})

module.exports = {
  webpack: {
    alias: {
      // 定义路径别名
      '@': path.resolve('./src')
    }
  },
  babel: {
    plugins: [
      [
        'import',
        {
          libraryName: 'antd-mobile',
          style: 'css'
        }
      ]
    ]
  },
  style: {
    postcss: {
      loaderOptions: {
        postcssOptions: {
          ident: 'postcss',
          plugins: [
            [
              // npm i -D postcss-pxtorem@6
              'postcss-pxtorem',
              {
                rootValue: 37.5, // 根元素字体大小
                // 转换所以写在class外联样式中的px单位，如查是内联style则px不会转换
                // Px或PX单位它不会转换
                propList: ['*'],
                // 精度
                unitPrecision: 6,
                exclude: /node_modules/i
              }
            ]
          ]
        }
      }
    }
  },
  // 开发服务器配置 - 详细配置请查看webpack中的devServer配置
  devServer: {
    // port: 8080,
    // open: false,
    // 中间件配置 -- 中间件函数，则一定要返回 middlewares
    // 利用中间件配置，可以用来mock数据
    // app它就是express实例对象
    setupMiddlewares: (middlewares, { app }) => {
      // app.get('/api/test', (req, res) => {})
      // homeFn(app)
      loadFileMap.forEach((fn) => fn(app))
      // 一定要返回参数1
      return middlewares
    },
    // 代理配置
    proxy: {
      '/api': {
        target: 'https:api.iynn.cn/film',
        changeOrigin: true,
        pathRewrite: { '^/api': '' }
      }
    }
  }
}