使用 webpack 或 babel 创建 react 组件 npm 包不起作用答案

【问题标题】：Creating a react component npm package with webpack or babel doesn't work使用 webpack 或 babel 创建 react 组件 npm 包不起作用
【发布时间】：2021-01-18 10:07:31
【问题描述】：

我在制作 React Component npm 包时遇到了问题。在这个包的一个组件中，我使用了一个图像（从'path/image.png'导入MyPicture）。我想将它作为 git npm 包导出，所以我安装了 babel 来转换它，但它无法将 png 转换为 js，所以我安装了 webpack 并使用了 image-loader + babel-loader。 npm start 上的一切正常，但我的 IDE（Webstorm）在 webpack 构建后看不到路径。如果我使用 babel 构建它，IDE 会找到正确的路径，但不会转译图像。有人遇到过类似的问题吗？

【问题讨论】：

标签： reactjs npm webpack babeljs

【解决方案1】：

作为一个可重用的组件，你需要内联资产。您需要使用嵌入图像的插件，并且必须在 webpack 配置中设置规则。执行此操作的常用方法是使用 url-loader，它将图像转换为 base64。

{
  test: /\.(jpg|png)$/,
  use: {
    loader: "url-loader",
    options: {
      limit: 25000,
    },
  },
},

请注意，这也会增加您的捆绑包大小。

【讨论】：

这不是我所期望的。我的问题是 Webstorm 在 webpack 构建后看不到导入...