Incluir ativos do pacote npm empacotado no webpack
Eu estive balançando a cabeça por um tempo, e estou me perguntando se é mesmo possível começar. Obrigado por qualquer ajuda com isso!
O pacote npmEu tenho um pacote npm que é basicamente uma biblioteca de componentes React. Esta biblioteca incorporou folhas de estilo, que referenciam ativos como fontes e imagens do CSS. Estes são então agrupados usando o webpack nomy-package.js
.
A configuração para isso se parece com:
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'
}
}
Com./lib/components/index.js
parecido com:
import '../index.styl';
import MyComponent from './my-component.js';
export {
MyComponent
}
Por enquanto, tudo bem.
A aplicaçãoAgora, em outra base de código, tenho o aplicativo principal, que instala este pacote npm.
A raiz do meu aplicativo requer este pacote ...
import MyPackage from 'my-package';
E é então o próprio webpack empacotado e carregado no navegador. Todos os scripts e blocos de estilos estão agrupados corretamente, no entanto, os estilos que fazem referência aos ativos estão usando a URL relativa do próprio pacote npm, fornecendo-me 404s do aplicativo.
Existe alguma maneira de dizer ao webpack para resolver essas imagens denode_modules/my-package/build/[webpack-generated-name].jpg
?
A configuração do webpack do meu aplicativo é assim:
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'
}
]
}
};