我一直在敲打这个问题一段时间，我想知道是否有可能开始。感谢您的帮助！
我有一个npm包，它基本上是一个React组件库。该库具有嵌入式样式表，它引用CSS中的字体和图像等资源。然后使用webpack将这些捆绑到from contextlib import contextmanager
@contextmanager
def tag(name):
print("<%s>" % name)
yield
print("</%s>" % name)
>>> with tag("h1"):
... print("foo")
...
<h1>
foo
</h1>
。
此配置如下：
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到目前为止，非常好。
现在在另一个代码库中，我有了主应用程序，它安装了这个npm包。
我的应用程序root需要这个包......
import '../index.styl';
import MyComponent from './my-component.js';
export {
MyComponent
}
然后将自己的webpack捆绑并加载到浏览器上。所有脚本和样式块都是正确捆绑的，但引用资产的样式使用的是npm包本身的相对url，因此从应用程序中提供404。
有没有办法告诉webpack从import MyPackage from 'my-package';
解析这些图片？
我的应用程序的webpack配置如下所示：
node_modules/my-package/build/[webpack-generated-name].jpg答案 0 :(得分：8)
找到解决这个问题的方法。
在我的应用程序的webpack配置中，我添加了一个插件（由@Interrobang推荐），它将静态资产从node_module/my-package复制到应用服务器的公共路径中：
var TransferWebpackPlugin = require('transfer-webpack-plugin');
...
plugins: [
new TransferWebpackPlugin([
{ from: 'node_modules/my-package/assets', to: path.join(__dirname, 'my/public') }
])
]
...
然后可以通过调用资产名称localhost:XXXX/my-image.jpg来访问这些内容。如果您已正确设置，则此处的服务器基本上会查看/my/public/my-image.jpg。
我正在使用Express，因此我只需在我的应用服务器中定义app.use(express.static('my/public'))。