现在我们正在将旧应用程序中的monolith提取到多个较小的npm包中 .

主要应用程序，以及每个新的npm包，都是由我们的webpack 4 babel“构建引擎”npm包构建并转换为es5 .

在其中一个软件包中，我们可能有一个简单的组件，例如：

// c:\my-component-with-image-lib\src\index.js
import myImg from './my-img.jpg'

export const MyComponentWithImage = () => {
  return {
    <div>
      <p>A simple react component with an image</p>
      <img src={myImg}/>
    </div>
  }
};

如果我们只使用 npx start 自己运行包，那么哪个工作正常 .

但是如果我们从每个包中做 npx build ，我们最终得到一个 dist 文件夹和 assets/images 文件夹，这也没关系 .

问题是，从主应用程序，当我们导入刚刚构建的软件包时，将不会显示任何图像/静态资产，因为主应用程序不会查找资产的每个node_modules / package-name .

// c:\consumer-application\src\App.jsx
import  { MyComponentWithImage } from 'my-component-with-image-lib'

export const App = () => {
  return {
    <div>
      <p>The image in MyComponentWithImage will result in a 404</p>
      <MyComponentWithImage />
    </div>
  }
};

因此，当它在运行每个包时在开发服务器上运行时，如果另一个应用程序正在导入包，它将无法工作，因为它只知道自己的资产文件夹 - 而不是node_modules文件夹中的包 .

由于这个问题，人们开始讨论不首先将模块构建到es5，而是直接导入它们然后制作范围包如 node_modules/@companyScope/packageA-Z . 然后，我们的想法是将webpack配置为从消费应用程序中构建 node_modules/@companyScope 内的所有包，而不是在每个包中 .

原因只是解决了（来自消费应用程序）已编译/构建的软件包中未知的静态资产路径的问题 .

我宁愿避免这种情况，因为我认为每个软件包都应该构建并转换为es5，但在这种情况下我能看到的唯一解决方案是使用copy-webpack-plugin来显式配置它以将文件从 node_modules/packageA/assets 复制到 currentApp/src/assets .

问题在于，这些包将依赖于webpack来导入和使用，这不是我想要的 .

最后我想url-loader并返回dataUrl而不是使用file-loader将适用于较小的图像，但在 生产环境 中并不是理想的 . 此外，我不确定它是否适用于其他静态资产，并且像这样内联它感觉有点“hacky” .

它曾经是CSS的同样问题，直到样式组件来拯救，但对于图像和其他静态资产，我真的看不到从外部npm包导入组件（包括图像和可能的其他静态资产）的好方法与webpack 4 .

真的希望这可能以某种方式 .

reactjs webpack webpack-4