React项目用react-app-rewired启动时报Content not from webpack is served from错误

问题原因 #

• 使用react-app-rewired时，单独创建的webpack.config.js不会被工具识别，必须通过config-overrides.js修改配置
• 错误提示源于devServer静态资源目录配置不匹配，webpack无法区分自身编译内容与外部静态资源

解决方案 #

1. 删除无效的webpack.config.js文件
   该文件对react-app-rewired无效，直接删除即可。

2. 修改config-overrides.js配置
   导入overrideDevServer方法，指定devServer的静态资源目录为项目默认的public文件夹，修正资源服务路径。

修改后的config-overrides.js代码如下：

const {
  override,
  addPostcssPlugins,
  addWebpackAlias,
  addBabelPlugins,
  overrideDevServer // 新增导入该方法
} = require('customize-cra')
const pxToViewport = require('postcss-px-to-viewport')
const path = require('path')

const alias = addWebpackAlias({
  '@': path.resolve(__dirname, 'src'),
  '@scss': path.resolve(__dirname, 'src', 'assets', 'styles')
})

const viewport = pxToViewport({
  viewportWidth: 375
})

// 配置devServer
const devServerConfig = () => config => {
  config.static = {
    directory: path.resolve(__dirname, 'public'), // 指定静态资源目录为public
    publicPath: '/'
  }
  return config
}

module.exports = {
  webpack: override(
    addPostcssPlugins([viewport]),
    alias,
    ...addBabelPlugins(['import', { libraryName: 'antd-mobile', style: 'css' }])
  ),
  devServer: overrideDevServer(
    devServerConfig()
  )
}

3. 重启项目
   执行npm start重新启动项目，错误提示应该会消失。

补充说明 #

• react-scripts@4.x版本中，devServer的静态资源配置字段从contentBase改为了static，所以需要使用static字段进行配置
• 配置publicPath: '/'确保静态资源的访问路径与项目根路径一致，避免资源加载异常

内容的提问来源于stack exchange，提问作者Orion