Я столкнулся с этой проблемой, на которую потратил добрых два дня.Пожалуйста помоги.Я был бы очень признателен за любые предложения, решения или разъяснения, если это не так, как работает веб-пакет или как его поддерживать.
У меня есть 2 проекта: 1. consumer 2. dependency
Оба базовых модуля es6 связаны с помощью веб-пакета.
dependency модуль - это модуль многократного использования , предназначенный для повторного использования другими модулями.Модуль consumer использует модуль dependency в качестве зависимости npm.
dependency модуль поставляет компонент со своим собственным активом изображения (он (es6) также экспортируется из js).Выходные данные связывания правильно генерируют актив изображения вместе с сгенерированным js в выходном каталоге dist с правильным адресом импорта в сгенерированном js.Все хорошо здесь.
consumer модуль использует dependency.Сгенерированный consumer пакет идентифицирует dependency пакет правильно и включает его.
Однако, проблема в , изображение, которое было экспортировано / упаковано модулем dependency не легко включается в комплект consumer и не включается / копируется в соответствующую папку, указанную для ресурсов образа (в конфигурации загрузчика файлов) при выполнении веб-пакета в конфигурации consumer.
зависимость / src / index.js
import anyImage from './img/any.jpg'; // image any.jpg available at this path
const foo = function() {
return "hello!";
};
export {foo, anyImage};
зависимость / webpack.config.js
const path = require('path');
module.exports = {
entry: './src/index.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'index.js',
libraryTarget: 'umd'
},
module: {
rules: [
{
test: /\.(png|jpg|gif)$/,
use: [
{
loader: "file-loader",
options: {
name: "[name].[ext]"
}
}
]
},
{
test: /\.js?$/,
loader: 'babel-loader'
}
]
}
};
потребитель / src / index.js
import {foo, anyImage} from "dependency";
import placeholderImage from './img/placeholder_350x150.png';
document.getElementById('placeholderImage').src = placeholderImage;
setTimeout(() => {
document.getElementById('placeholderImage').src = anyImage;
}, 2000);
потребитель / webpack.config.js
const path = require('path');
module.exports = {
entry: './src/index.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'my-widget.js',
libraryTarget: 'umd'
},
module: {
rules: [
{
test: /\.(png|jpg|gif)$/,
use: [
{
loader: "file-loader",
options: {
name: "[name].[ext]",
publicPath: "/dist/"
}
}
]
},
{
test: /\.js?$/,
loader: 'babel-loader'
}
]
}
};
Заранее спасибо!