config-overrides配置outputDir

config-overrides.js 是一个用于修改 create-react-app 默认配置的文件。如果你想要修改输出目录(outputDir)，你可以按照以下步骤进行操作：

1. 在项目根目录下创建一个 config-overrides.js 文件。

2. 添加以下代码：

const paths = require('react-scripts/config/paths');

module.exports = function override(config, env) {
  // 修改输出路径
  paths.appBuild = path.join(path.dirname(paths.appBuild), 'your-custom-dir-name');
  config.output.path = paths.appBuild;

  return config;
};

3. 将 "build" 脚本修改为 "react-scripts build --config-overrides.js"。

4. 运行 "npm run build" 命令，输出目录将会被修改为 "your-custom-dir-name"。

注意：这种修改方式可能会导致一些不可预料的问题，因此建议仔细考虑是否需要修改输出目录。

相关问题

config-overrides配置静态资源访问路径

config-overrides.js 文件可以用于覆盖 Create React App 的默认配置。如果要配置静态资源访问路径，可以在 config-overrides.js 文件中添加如下内容：

const path = require('path');

module.exports = function override(config, env) {
  // 修改 publicPath
  config.output.publicPath = '/your-custom-path/';

  // 修改 file-loader 配置
  const fileLoaderRule = config.module.rules.find(rule => rule.test.test('.svg'));
  fileLoaderRule.exclude = path.resolve(__dirname, 'src/assets/svg');

  const svgSpriteLoaderRule = {
    test: /\.svg$/,
    include: path.resolve(__dirname, 'src/assets/svg'),
    use: [
      {
        loader: 'svg-sprite-loader',
        options: {
          symbolId: 'icon-[name]'
        }
      }
    ]
  };
  config.module.rules.unshift(svgSpriteLoaderRule);

  return config;
};

其中，`config.output.publicPath` 可以配置静态资源访问路径，如 `/your-custom-path/`。

另外，如果你使用了 svg-sprite-loader 来处理 SVG 图标，还需要修改 file-loader 的配置，将 SVG 图标目录排除在外，并添加 svg-sprite-loader 的配置，具体代码可以参考上述例子。

config-overrides

config-overrides是一个用于修改Create React App (CRA)配置的文件。它允许你在不eject（暴露配置）的情况下，对CRA的默认配置进行自定义。通过config-overrides文件，你可以添加、删除和修改CRA的Webpack配置。

你可以使用config-overrides来修改webpack配置、添加自定义loader和plugin、修改babel配置等。这样可以更灵活地定制CRA项目的构建过程，满足特定的需求。

在使用config-overrides之前，你需要安装customize-cra这个包。然后，在项目根目录下创建一个config-overrides.js文件，并在其中编写相应的配置。

例如，你可以使用config-overrides来修改webpack配置，如下所示：

const path = require('path');

module.exports = function override(config, env) {
  // 修改output路径
  config.output.path = path.join(__dirname, 'dist');

  // 添加一个自定义loader
  config.module.rules.push({
    test: /\.txt$/,
    use: 'raw-loader'
  });

  // 修改babel配置，支持装饰器语法
  config = injectBabelPlugin(
    ['@babel/plugin-proposal-decorators', { legacy: true }],
    config
  );

  return config;
};

以上示例中，我们修改了output的路径为项目根目录下的dist文件夹，并添加了一个处理txt文件的自定义loader。同时，我们还通过injectBabelPlugin函数将装饰器语法支持添加到了babel配置中。

这只是config-overrides的一个简单示例，你可以根据具体需求进行配置。使用config-overrides可以轻松地对Create React App进行个性化定制，而无需eject项目。