react 中使用raw-loader

在 React 开发中，`raw-loader` 是一个 Webpack 插件，它用于加载外部的文本文件（如 JSON、CSS 或其他静态文件）并将其作为字符串插入到 JavaScript 代码中。当你需要在运行时动态地注入一些配置数据，比如从服务器获取的 API 返回的 JSON 数据，或者是为了避免浏览器缓存导致样式变化等问题，`raw-loader` 就非常有用。

通常，你会在 `.webpack.config.js` 文件中配置这个插件，然后在你的组件中通过 `<script type="module">` 或者 import 语句导入处理后的数据，例如：

// webpack.config.js
{
  module: {
    rules: [
      {
        test: /\.(json|css)$/i,
        use: ['raw-loader']
      }
    ]
  }
}

// 使用 raw-loader 导入 json 文件
import rawJson from './data.json?raw';

function MyComponent() {
  const jsonData = JSON.parse(rawJson); // 解析为 JavaScript 对象
  // ...
}

注意 `?raw` 后缀是告诉 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项目。