react-scripts如何正确加载自定义NPM包中的图片资源？

核心原因 #

你的NPM包webpack配置缺少图片资源处理规则，导致打包后图片路径未被正确解析；同时Create React App处理第三方包资源时，要求包本身输出正确的资源引用路径。

是否需要额外的图片加载器？ #

是，必须添加图片资源处理规则（webpack5推荐用内置的Asset Modules，webpack4及以下用file-loader）。当前配置仅包含样式和TS加载器，未处理图片资源，导致SCSS中的url('./img.png')未被webpack正确转换，最终在CRA项目中路径错误。

具体配置方案 #

1. 调整NPM包的webpack配置 #

若使用webpack 5+（推荐）

无需额外安装依赖，直接添加Asset Modules规则：

module.exports = {
  // 保留原有ts-loader、style-loader等配置
  module: {
    rules: [
      // 图片资源处理规则
      {
        test: /\.(png|jpg|jpeg|gif)$/i,
        type: 'asset/resource',
        generator: {
          // 指定图片打包后输出到dist根目录，匹配你当前的文件结构
          filename: '[name][ext]'
        }
      }
    ]
  },
  output: {
    // 其他output配置不变，新增publicPath确保资源引用为相对路径
    publicPath: './'
  }
};

若使用webpack 4及以下

先安装file-loader：

npm install file-loader --save-dev

再添加规则：

module.exports = {
  module: {
    rules: [
      // 保留原有规则
      {
        test: /\.(png|jpg|jpeg|gif)$/i,
        use: [
          {
            loader: 'file-loader',
            options: {
              name: '[name][ext]',
              outputPath: './', // 图片输出到dist根目录
              publicPath: './' // 生成相对路径的引用
            }
          }
        ]
      }
    ]
  }
};

2. 校验SCSS中的图片路径 #

确保SCSS里的路径与打包后的结构匹配：比如如果SCSS文件在dist/components下，图片在dist根目录，路径应改为url('../img.png')，或依赖webpack的publicPath自动处理。

3. 重新打包并验证NPM包 #

重新打包后检查：

• dist根目录下存在img.png
• 打包后的JS/样式文件中，图片引用路径为./img.png（而非绝对路径）

4. 在CRA项目中验证 #

重新安装你的NPM包：

• 运行react-scripts start后，浏览器Styles标签中的图片路径应为localhost:3000/node_modules/package-name/dist/img.png
• 执行react-scripts build后，图片会被自动复制到build/static/media目录，路径由CRA自动处理

补充说明 #

• Create React App默认支持第三方包的资源加载，但要求包本身输出相对路径的资源引用
• 尽量避免 eject 或修改CRA的默认配置，通过调整NPM包的webpack配置适配CRA即可

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