javascript - 如何打包一个 JS 库，其中包含可通过 webpack 公开访问的图像？

Question

我有一个导出<Image name="cat" />组件的简单库。该组件将使用该name道具来计算下划线标记的正确src值。<img />

但是，我在将它与 webpack 捆绑时遇到了麻烦（或者问题本身可能是我试图在发布到 npm 之前捆绑它）。这是一些更好地绘制图片的代码：

import cat from "../images/cat.png"
import dog from "../images/dog.png"

const images = { cat, dog }

const Image = ({ name }) => (
  <img src={images[name]} />
)

    {
      test: /\.(png|jpg|gif|svg)$/,
      use: [{
        loader: 'file-loader',
        options: {
          name: '[path][name].[ext]'
        }
      }]
    },

在我的库上运行后webpack，该dist/目录将包含一个同时包含dog.png和的目录cat.png。转译的缩小代码将具有对它们的字符串引用。所以我将它发布到 npm。

现在，这是吸引我的部分。当我在我的项目上安装发布的包并运行它并使用该<Image name="dog" />组件时，渲染的img仍然具有正确的路径（/images/dog.png），但webpack-dev-server没有意识到它需要将所述文件处理到公共目录中。所以在浏览器中，URL 不是在图像上解析，而是在index.html.

现在，如果我将图像直接导入到我的项目import dog from "my-library/images/dog.png中，那么 webpack 会正确处理它。

我可以想到一些我做错的事情，但最终需要一些指导：

1. 如果我要在消费者项目上通过 npm 和 webpack 使用它，我不应该在首先发布它之前通过 webpack 编译我的库。
2. 在库中捆绑资产的正确方法是消费者项目必须导入资产 (png) 以便 webpack 处理它。尝试以我尝试使用Image组件的方式抽象图像资产是行不通的。
3. 我的 webpack 配置存在根本缺陷，我缺少有关如何进行资产加载的信息。

我应该如何进行？

标签： javascriptreactjswebpack