Configuration Overrides

/**
 * Single function export for webpack-only overrides
 * @param config - Webpack configuration object
 * @param env - Environment string ('development' or 'production')
 * @returns Modified webpack configuration
 */
module.exports = function override(config, env) {
  // Modify webpack config
  return config;
};

module.exports = function override(config, env) {
  // Add a new webpack plugin
  config.plugins.push(new SomeWebpackPlugin());
  
  // Modify existing rules
  const babelLoader = config.module.rules.find(rule => 
    rule.use && rule.use.find(use => use.loader && use.loader.includes('babel-loader'))
  );
  
  return config;
};

/**
 * Object export with multiple override functions
 */
module.exports = {
  webpack: function(config, env) { return config; },
  jest: function(config) { return config; },
  devServer: function(configFunction) { return configFunction; },
  paths: function(paths, env) { return paths; }
};

/**
 * Webpack configuration override function
 * @param config - Webpack configuration object from react-scripts
 * @param env - Environment string ('development' or 'production')
 * @returns Modified webpack configuration object
 */
webpack: function(config, env) {
  // Modify webpack configuration
  return config;
}

webpack: function(config, env) {
  // Add custom alias
  config.resolve.alias = {
    ...config.resolve.alias,
    '@': path.resolve(__dirname, 'src')
  };

  // Add custom loader
  config.module.rules.push({
    test: /\.custom$/,
    use: 'custom-loader'
  });

  // Modify existing rules
  const oneOfRule = config.module.rules.find(rule => rule.oneOf);
  oneOfRule.oneOf.unshift({
    test: /\.module\.scss$/,
    use: ['style-loader', 'css-loader', 'sass-loader']
  });

  return config;
}

/**
 * Jest configuration override function
 * @param config - Jest configuration object from react-scripts
 * @returns Modified Jest configuration object
 */
jest: function(config) {
  // Modify Jest configuration
  return config;
}

jest: function(config) {
  // Add custom test path ignore patterns
  if (!config.testPathIgnorePatterns) {
    config.testPathIgnorePatterns = [];
  }
  
  if (!process.env.RUN_COMPONENT_TESTS) {
    config.testPathIgnorePatterns.push('<rootDir>/src/components/**/*.test.js');
  }

  // Add custom setup files
  config.setupFilesAfterEnv = config.setupFilesAfterEnv || [];
  config.setupFilesAfterEnv.push('<rootDir>/src/setupTests.js');

  // Modify module name mapping
  config.moduleNameMapper = {
    ...config.moduleNameMapper,
    '^@/(.*)$': '<rootDir>/src/$1'
  };

  return config;
}

/**
 * Dev server configuration override function
 * @param configFunction - Original function that creates dev server config
 * @param env - Environment string (passed by react-app-rewired)
 * @returns New function that creates modified dev server config
 */
devServer: function(configFunction, env) {
  return function(proxy, allowedHost) {
    const config = configFunction(proxy, allowedHost);
    // Modify dev server config
    return config;
  };
}

devServer: function(configFunction) {
  return function(proxy, allowedHost) {
    const config = configFunction(proxy, allowedHost);
    
    // Enable HTTPS with custom certificates
    const fs = require('fs');
    config.https = {
      key: fs.readFileSync(process.env.REACT_HTTPS_KEY, 'utf8'),
      cert: fs.readFileSync(process.env.REACT_HTTPS_CERT, 'utf8'),
      ca: fs.readFileSync(process.env.REACT_HTTPS_CA, 'utf8'),
      passphrase: process.env.REACT_HTTPS_PASS
    };

    // Add custom middleware
    config.before = function(app) {
      app.get('/api/health', (req, res) => {
        res.json({ status: 'ok' });
      });
    };

    return config;
  };
}

/**
 * Paths configuration override function
 * @param paths - Paths object from react-scripts
 * @param env - Environment string ('development', 'production', or 'test')
 * @returns Modified paths object
 */
paths: function(paths, env) {
  // Modify paths configuration
  return paths;
}

paths: function(paths, env) {
  // Change build directory
  paths.appBuild = path.resolve(__dirname, 'dist');
  
  // Add custom paths
  paths.appCustom = path.resolve(__dirname, 'custom');
  
  // Modify source directory (advanced use case)
  if (env === 'development') {
    paths.appSrc = path.resolve(__dirname, 'dev-src');
  }
  
  return paths;
}

// 1. Single file in project root
// config-overrides.js

// 2. Directory with index.js
// config-overrides/index.js

// 3. Custom path via package.json
{
  "config-overrides-path": "node_modules/some-preconfigured-rewire"
}

// 4. Custom path via command line
// --config-overrides ./custom/path/overrides.js

// Deprecated dev server field (shows warning from config-overrides.js)
module.exports = {
  devserver: function(configFunction) { /* deprecated */ }
};

// Warning message displayed:
console.log(
  'Warning: `devserver` has been deprecated. Please use `devServer` instead as ' +
  '`devserver` will not be used in the next major release.'
);

// Modern dev server field
module.exports = {
  devServer: function(configFunction, env) { /* use this */ }
};