const { whenDev } = require('@craco/craco');
const { loaderByName } = require('@craco/craco');
const webpack = require('webpack');
const WebpackBar = require('webpackbar');
const SimpleProgressWebpackPlugin = require('simple-progress-webpack-plugin');
const AntdDayjsWebpackPlugin = require('antd-dayjs-webpack-plugin');
const CircularDependencyPlugin = require('circular-dependency-plugin');
const DashboardPlugin = require('webpack-dashboard/plugin');
const CracoAntDesignPlugin = require('craco-antd');
const CracoLessPlugin = require('craco-less');

const path = require('path');
const pathResolve = (pathUrl) => path.join(__dirname, pathUrl);

module.exports = {
  babel: {
    presets: [
      [
        '@babel/preset-env',
        {
          modules: false, // 对ES6的模块文件不做转化，以便使用tree shaking、sideEffects等
          useBuiltIns: 'entry', // browserslist环境不支持的所有垫片都导入
          corejs: {
            version: 3, // 使用core-js@3
            proposals: true
          }
        }
      ]
    ],
    plugins: [
      // 配置 babel-plugin-import
      [
        'import',
        { libraryName: 'antd', libraryDirectory: 'es', style: true },
        'antd'
      ],
      // 配置解析器
      ['@babel/plugin-proposal-decorators', { legacy: true }],
      ['@babel/plugin-proposal-class-properties', { loose: true }],
      ['babel-plugin-styled-components', { displayName: true }]
    ],
    loaderOptions: (babelLoaderOptions, { env, paths }) => {
      return babelLoaderOptions;
    }
  },
  webpack: {
    // 配置别名
    alias: {
      '@': pathResolve('src')
    },
    plugins: [
      // webpack构建进度条
      new WebpackBar({
        profile: true,
        name: 'coderma'
      }),
      // new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/),
      // 查看打包的进度
      new SimpleProgressWebpackPlugin(),
      // 时间转换工具采取day替换moment
      new AntdDayjsWebpackPlugin()
      // 新增模块循环依赖检测插件
      // ...whenDev(
      //   () => [
      //     new CircularDependencyPlugin({
      //       exclude: /node_modules/,
      //       include: /src/,
      //       failOnError: true,
      //       allowAsyncCycles: false,
      //       cwd: process.cwd()
      //     }),
      //     // webpack-dev-server 强化插件
      //     new DashboardPlugin(),
      //     new webpack.HotModuleReplacementPlugin()
      //   ],
      //   []
      // )
    ],
    //抽离公用模块
    optimization: {
      splitChunks: {
        cacheGroups: {
          commons: {
            chunks: 'initial',
            minChunks: 2,
            maxInitialRequests: 5,
            minSize: 0
          },
          vendor: {
            test: /node_modules/,
            chunks: 'initial',
            name: 'vendor',
            priority: 10,
            enforce: true
          }
        }
      }
    },
    /**
     * 重写 webpack 任意配置
     *  - 与直接定义 configure 对象方式互斥
     *  - 几乎所有的 webpack 配置均可以在 configure 函数中读取，然后覆盖
     */
    configure: (webpackConfig, { env, paths }) => {
      // paths.appPath='public'
      paths.appBuild = 'dist'; // 配合输出打包修改文件目录
      webpackConfig.output = {
        ...webpackConfig.output,

        path: path.resolve(__dirname, 'dist'), // 修改输出文件目录
        publicPath: '/'
      };

      return webpackConfig;
    }
  },
  plugins: [
    /* 支持less module */
    {
      plugin: CracoLessPlugin,
      options: {
        lessLoaderOptions: {
          lessOptions: {
            modifyVars: {
              // 自定义主题（如果有需要，单独文件定义更好一些）
              '@primary-color': '#ffa142',
              'border-radius': '8px'
            },
            javascriptEnabled: true
          }
        }
      }
    }
  ],
  devServer: {
    //   port: 3000,
    proxy: {
      '/api': {
        // target: 'http://116.62.127.185:9999',
        target: 'http://localhost:8000',
        changeOrigin: true,
        pathRewrite: {
          '^/api': ''
        }
      }
    }
  }
};