const path = require('path');
const { injectBabelPlugin, getLoader } = require('react-app-rewired');
const rewireLess = require('react-app-rewire-less');
const rewireMobX = require('react-app-rewire-mobx');

const fileLoaderMatcher = function (rule) {
  return rule.loader && rule.loader.indexOf('file-loader') != -1;
}

function resolve(dir) {
  return path.join(__dirname, '.', dir);
}

module.exports = function override(config, env) {
  if (env === 'production') {
    config = productionOverride(config);
  }
  config.resolve.alias = {
    '@': resolve('src')
  }
  config = rewireMobX(config, env);
  config = injectBabelPlugin(['import', { libraryName: 'antd-mobile', style: true }], config);
  config = rewireLess.withLoaderOptions({
    modifyVars: {
        '@brand-primary': '#AF151B', //  #C53806'#af151b' '#a4000c', //'#dd3333', // '#E83202',
        '@color-text-base': '#333'
    },
    javascriptEnabled: true
  }) (config, env);

  // It is generally necessary to use the Icon component, need to configure svg-sprite-loader
  config.module.rules[1].oneOf.unshift(
    {
      test: /\.(svg)$/i,
      loader: 'svg-sprite-loader',
      include: [
        require.resolve('antd-mobile').replace(/warn\.js$/, ''),  // 1. svg files of antd-mobile
        path.resolve('.', 'src/assets/svg'),  // folder of svg files in your project
      ]
    }
  );
  const fileLoader = getLoader(config.module.rules, fileLoaderMatcher);
  fileLoader.exclude.push(/\.svg$/i);

  return config;
};

function productionOverride(config) {
  // 禁止生成 sourcemap
  config.devtool = false;
  return config;
}