没有 webpack 的 url-loader？

如何解决没有 webpack 的 url-loader？

我有一个组件库，将随附一些小资产（图像）。这些资产被导入到库中的各种组件中。

构建脚本使用 babel（不带 webpack）将 js(x) 转译到构建目录，目前正在将图像转储到 build/assets/images。

这在测试构建时有效，但在另一个项目中使用该组件（使用 webpack）时，该组件会尝试引用 node_modules 文件夹：

示例组件：

import myImage from './assets/images/myImage.png';

const MyComponent = () => (
    <img src={myImage} />
);

export MyComponent;

用法：

import MyComponent from 'myLibrary/MyComponent';

export default () => (
    <MyComponent />
);

错误信息：

myImage.png:1 GET http://localhost:9001/node_modules/myLibrary/assets/images/myImage.png 404（未找到）

据我所知，包含资产的“最佳”方式是使用 url-loader，以便将它们转换为数据 uri。但是，尝试在没有 Webpack 的情况下使用 url-loader 是行不通的：

babel.config.js

    ...
    plugins: [
        [
            "url-loader",{
                "extensions": ["png","jpg","jpeg","gif","svg","pdf"],"limit": 0
            }
        ]
    ]
    ...

错误：找不到模块“babel-plugin-url-loader”

解决方法

我发现了这个，它适用于 PNG 和 SVG 文件 - 非常适合我的需要！

https://www.npmjs.com/package/babel-plugin-inline-import-data-uri