Javascript Webpack 输出错误的图像路径
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/33243399/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Webpack outputs wrong path for images
提问by CascadiaJS
I'm building a site with react and webpack. When I build the app with webpack and try to include images, the images are written to the build folder along with the other assets, but the link to the image that webpack outputs is incorrect. I can go in the build folder and view the image, so it is being copied correctly it is the link that is wrong.
我正在使用 react 和 webpack 构建一个站点。当我使用 webpack 构建应用程序并尝试包含图像时，图像与其他资产一起写入构建文件夹，但 webpack 输出的图像链接不正确。我可以进入构建文件夹并查看图像，因此它被正确复制，是链接错误。
my react component looks like this:
我的反应组件如下所示：
'use strict';
var React = require('react');
var newsFeedIcon = require('../../img/news-feed-icon.png');
//create story component
module.exports = React.createClass({
render: function () {
return (
<div className="col_12 footer-right mobile-foot">
<img src={newsFeedIcon} />
<p><a href="/about">About Us</a> | <a href="/contact">Contact Us</a> | <a href="/faq">FAQ</a> | <a href="/media">Media</a> | <a href="#">Privacy Statement</a> | <a href="#">Terms of Service</a></p>
</div>
);
}
})My Webpack configuration looks like this:
我的 Webpack 配置如下所示：
webpack: {
client: {
entry: __dirname + '/app/js/client.jsx',
output: {
path: 'build/',
file: 'bundle.js'
},
module: {
loaders: [
{
test: /\.jsx$/,
loader:'jsx-loader'
},
{
test: /\.css$/,
loader: "style-loader!css-loader"
},
{
test: /\.(eot|woff|woff2|ttf|svg|png|jpg)$/,
loader: 'url-loader?limit=30000&name=[name]-[hash].[ext]'
},
{
test: /\.jpe?g$|\.gif$|\.png$/i,
loader: 'file-loader'
},
{
test: /\.jpg/,
loader: 'file'
}]
}
},
test: {
entry: __dirname + '/test/client/test.js',
output: {
path: 'test/client/',
file: 'bundle.js'
},
module: {
loaders: [
{
test: /\.jsx$/,
loader:'jsx-loader'
}]
}
},
karma_test: {
entry: __dirname + '/test/karma_tests/test_entry.js',
output: {
path: 'test/karma_tests/',
file: 'bundle.js'
},
module: {
loaders: [
{
test: /\.jsx$/,
loader:'jsx-loader'
}]
},
background: true
}
},I've been banging my head against the wall on this since yesterday, so any help would be appreciated. Let me know you need more info.
从昨天开始，我一直在用头撞墙，所以任何帮助将不胜感激。让我知道您需要更多信息。
Thanks!
谢谢！
回答by hampusohlsson
You could try setting the nameoption for file-loader, as well as output.publicPath.
您可以尝试为 file-loader设置name选项，以及output.publicPath.
output: {
path: 'build/',
file: 'bundle.js',
publicPath: '/assets'
}
...
...
{
test: /\.(png|jpg)$/,
loader: 'file-loader?name=/img/[name].[ext]'
}
Then the resolved url in your require will be:
然后您的需求中解析的网址将是：
/assets/img/news-feed-icon.png
