React 組件庫無法加載自己的 static 資產

Question

我有一個反應應用程序（使用創建反應應用程序），然后是一個組件庫（直接使用 webpack）。 組件庫中的一個組件需要在其導出的組件之一中加載 png 文件。 在組件庫的 webpack 配置中，我有一個部分，例如：

      {
        test: /\.(png|jpg|jpeg|gif)$/i,
        type: 'asset/resource',
      },

這成功地在組件庫 output 目錄中生成如下文件： 29b6b66cf1a691be2b3f.png 。 問題在於，當應用程序使用該組件並且該組件嘗試加載圖像時，img 元素是<img... src="29b6b66cf1a691be2b3f.png" />並且無法加載，因為該圖像實際上存在於組件庫文件夾（此時在反應應用程序的node_modules/component-library/內）。

我已經盡我所能搜索了互聯網，但似乎無法弄清楚最好的解決方案是什么。 任何幫助表示贊賞。 如果需要，我會迅速提供澄清。

更新：我發現了CopyWebpackPlugin ，但很不幸，這需要我從創建反應應用程序中彈出“父”應用程序。 我非常希望避免的事情。

UPDATE2：目前的計划是嘗試遵循 此處解釋的內容。 它的要點是利用重新布線之類的東西來避免需要彈出，並且仍然能夠通過以下方式編輯 webpack 配置：

// in ./build.js
const rewire = require('rewire');
const defaults = rewire('react-scripts/scripts/build.js');
const config = defaults.__get__('config');

// edit webpack config values here

...如果我發現這種方法有效，我將在這里回答我自己的問題。

Answer 1

好吧，這感覺它比它需要的要混亂得多，但我能夠找到一種方法來實現這一點。 碎片如下。

首先，需要安裝copy-webpack-plugin 。 這並不像聽起來那么簡單，因為我需要找到一個不會與我的react-scripts （創建 react 應用程序）所需的 webpack 版本沖突的版本。 我確定copy-webpack-plugin@6.4.1是支持 webpack v4 的最后一個版本，所以我安裝了它，然后將以下內容添加到我的package.json ：

  "overrides": {
    "copy-webpack-plugin": {
      "webpack": "4.44.2"
    }
  },

這確保了它將使用我的react-scripts安裝所期望的 webpack 版本。

然后，我還需要安裝rewire ，並將以下內容添加到名為build.js的文件中：

const rewire = require('rewire');
const defaults = rewire('react-scripts/scripts/build.js');
const config = defaults.__get__('config');
const CopyPlugin = require("copy-webpack-plugin");


const patterns = [
  { 
    context: "node_modules/component-library/path/",
    from: "*.png", 
    to: "." 
  },
]


if(config.plugins === undefined){
  config.plugins = [new CopyPlugin({patterns})]
}else{
  config.plugins.push(new CopyPlugin({patterns}))
}

// below lets it work in dev mode too
if(config.devServer === undefined){
  config.devServer = {
    writeToDisk: true
  }
}else{
  config.devServer.writeToDisk = true;
}

最后，必須將我的構建腳本更新為：

  "scripts": {
    ...
    "build": "node ./build.js",
    ...
  },