const CracoAlias = require('craco-alias');
const webpack = require('webpack');
const TerserPlugin = require('terser-webpack-plugin');
const GenerateMetaPlugin = require('./script/GenerateMetaPlugin');

module.exports = {
  plugins: [
    {
      plugin: CracoAlias,
      options: {
        baseUrl: 'src',
        source: 'tsconfig',
        tsConfigPath: './tsconfig.json',
      },
    },
  ],
  devServer: {
    client: {
      overlay: {
        runtimeErrors: (error) => {
          // 忽略ResizeObserver的错误防止阻断调试
          return !(
            error.message === 'ResizeObserver loop limit exceeded' ||
            error.message ===
              'ResizeObserver loop completed with undelivered notifications.'
          );
        },
      },
    },
  },
  webpack: {
    configure: (webpackConfig, arg) => {
      // webpack v4 2 v5 polyfill workaround
      webpackConfig.resolve.fallback = {
        path: false,
        fs: false,
        assert: false,
        buffer: require.resolve('buffer'),
        'process/browser': require.resolve('process/browser'),
        os: require.resolve('os-browserify/browser'),
      };
      webpackConfig.plugins.push(
        new GenerateMetaPlugin(),
        new webpack.ProvidePlugin({
          process: 'process/browser',
          Buffer: ['buffer', 'Buffer'],
        }),
      );

      // 处理typescript的warning：
      // Module not found: Error: Can't resolve 'perf_hooks' in '/node_modules/typescript/lib'
      // Critical dependency: the request of a dependency is an expression
      webpackConfig.module.noParse = /typescript\/lib\/typescript.js$/;

      // 去掉一个warning
      webpackConfig.ignoreWarnings = [/Failed to parse source map/];

      // 去掉comments
      if (arg.env === 'production') {
        webpackConfig.optimization.minimize = true;
        webpackConfig.optimization.minimizer = [
          new TerserPlugin({
            terserOptions: {
              output: {
                comments: false,
              },
            },
            extractComments: false,
          }),
        ];
      }

      return webpackConfig;
    },
  },
  style: {
    postcss: {
      mode: 'file',
    },
  },
};