Блог

У меня есть библиотека компонентов, которая будет поставляться с несколькими небольшими ресурсами (изображениями). Эти ресурсы импортируются в различные компоненты библиотеки.

Сценарий сборки использует 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 ПОЛУЧИТЬ http://localhost:9001/node_modules/myLibrary/assets/images/myImage.png 404 (Не найден)

Насколько я понимаю, «лучший» способ включить ресурсы — использовать URL-загрузчик, чтобы они были преобразованы в uri данных. Однако попытка использовать URL-загрузчик без Webpack не работает:

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