Включите ресурсы из пакета npm в комплекте
Я бился головой об этом некоторое время, и мне интересно, возможно ли вообще начать с этого. Спасибо за любую помощь с этим!
Пакет npmУ меня есть пакет npm, который в основном представляет собой библиотеку компонентов React. Эта библиотека имеет встроенные таблицы стилей, которые ссылаются на ресурсы, такие как шрифты и изображения из CSS. Затем они все связаны с помощью веб-пакета вmy-package.js
.
Конфиг для этого выглядит так:
var path = require('path');
module.exports = {
module: {
loaders: [
{
test: /\.js$/,
loaders: ['babel-loader'],
exclude: /node_modules/
},
{
test: /\.css$/,
loader: "style-loader!css-loader"
},
{
test: /\.(png|jpg|jpeg|gif|svg|woff|woff2|ttf|eot)$/,
loader: 'file-loader'
},
{
test: /\.styl$/,
loader: 'style-loader!css-loader!stylus-loader'
}
]
},
entry: [
'./lib/components/index.js',
'./lib/index.styl'
],
output: {
path: path.join(__dirname, 'build/'),
filename: 'my-package.js'
}
}
С./lib/components/index.js
выглядит как:
import '../index.styl';
import MyComponent from './my-component.js';
export {
MyComponent
}
Все идет нормально.
ПриложениеТеперь в другой кодовой базе у меня есть основное приложение, которое устанавливает этот пакет npm.
Мой корень приложения требует этот пакет ...
import MyPackage from 'my-package';
И затем сам упаковывается и загружается в браузер. Все скрипты и блоки стилей связаны правильно, однако стили, которые ссылаются на ресурсы, используют относительный URL из самого пакета npm, поэтому я получаю 404s из приложения.
Есть ли способ сказать веб-пакет, чтобы разрешить эти изображения изnode_modules/my-package/build/[webpack-generated-name].jpg
?
Конфигурация веб-пакета моего приложения выглядит следующим образом:
var path = require('path'),
webpack = require('webpack');
module.exports = {
devtool: '#eval-source-map',
entry: [
'my-package',
'webpack/hot/only-dev-server',
'./app/index.js',
],
output: {
path: path.join(__dirname, 'build/static'),
filename: 'bundled.js',
publicPath: '/',
},
plugins: [
new webpack.HotModuleReplacementPlugin()
],
resolve: {
extensions: ['', '.js']
},
resolveLoader: {
'fallback': path.join(__dirname, 'node_modules')
},
module: {
loaders: [
{
test: /\.js$/,
loaders: ['react-hot', 'babel'],
exclude: /node_modules/,
include: __dirname
},
{
test: /\.css?$/,
loader: "style-loader!css-loader",
include: __dirname
},
{
test: /\.(jpg|jpeg|ttf|eot|svg|woff(2)?)(\?[a-z0-9]+)?$/,
loader: 'file-loader'
},
{
test: /\.styl$/,
loader: 'style-loader!css-loader!stylus-loader'
}
]
}
};