解决create-react-app项目无法引用src文件夹外的资源问题

使用craco覆盖webpack配置

修改craco.config.js文件

// 先解除限制src/以外的文件资源
const definePlugin = webpackConfig.plugins.find(({ constructor }) => {
    return constructor && constructor.name === 'DefinePlugin';
});

const scopePluginIndex = webpackConfig.resolve.plugins.findIndex(({ constructor }) => {
    return constructor && constructor.name === 'ModuleScopePlugin';
});

definePlugin.definitions['process.env'] = {
    ...definePlugin.definitions['process.env']
};
webpackConfig.resolve.plugins.splice(scopePluginIndex, 1);

// 添加loader以支持引用src/外资源
const { isFound, match } = getLoader(
    webpackConfig,
    loaderByName("babel-loader")
);
if (isFound) {
    const include = Array.isArray(match.loader.include)
      ? match.loader.include
      : [match.loader.include];

    match.loader.include = include.concat(packages);
}

完整craco.config.js文件

const path = require('path');
const { getLoader, loaderByName } = require("@craco/craco");

const packages = [];
packages.push(path.join(__dirname, "./@types"));

module.exports = {
  webpack: {
    alias: {
      '@': path.resolve(__dirname, 'src/'),
      types: path.resolve(__dirname, '@types/'),
      dist: path.resolve(__dirname, 'dist/')
    },
    configure: webpackConfig => {
      const definePlugin = webpackConfig.plugins.find(({ constructor }) => {
        return constructor && constructor.name === 'DefinePlugin';
      });

      const scopePluginIndex = webpackConfig.resolve.plugins.findIndex(({ constructor }) => {
        return constructor && constructor.name === 'ModuleScopePlugin';
      });

      definePlugin.definitions['process.env'] = {
        ...definePlugin.definitions['process.env']
      };
      webpackConfig.resolve.plugins.splice(scopePluginIndex, 1);

      const { isFound, match } = getLoader(
        webpackConfig,
        loaderByName("babel-loader")
      );
      if (isFound) {
        const include = Array.isArray(match.loader.include)
          ? match.loader.include
          : [match.loader.include];

        match.loader.include = include.concat(packages);
      }
      return webpackConfig;
    }
  }
};