Webpack输出的图片路径错误

Question

我正在使用React和Webpack构建一个网站。当我用Webpack构建应用程序并尝试包含图像时，这些图像会与其他资源一起写入构建文件夹，但是Webpack输出的图像链接是不正确的。我可以进入构建文件夹查看图像，因此它被正确复制，但链接是错误的。

我的React组件如下所示：

'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>
      );
  }
})

我的 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
      }
    },

昨天以来我一直在为这个问题苦苦思索，如果有任何帮助将不胜感激。请让我知道如果您需要更多信息。

谢谢！

- CascadiaJS

Answer 1

你可以尝试设置 file-loader 的 name 选项，以及 output.publicPath。

 output: {
     path: 'build/',
     file: 'bundle.js',
     publicPath: '/assets'
}

...

{ 
     test: /\.(png|jpg)$/, 
     loader: 'file-loader?name=/img/[name].[ext]' 
}

那么你的require中解析后的URL将会是：

/assets/img/news-feed-icon.png

- hampusohlsson

---

在这里投一票，因为建议的解决方案实际上解决了我的问题——我没有针对实际问题进行检查——这是提问者的责任。 - arcseldon

谢谢，它有效了。对于像我这样使用Django后端的人来说，publicPath需要设置为/static/bundles/。 - Vaibhav Vishal

这怎么可能有效？当我尝试将路径设置为 "dist/" 时，webpack 抱怨它不是绝对路径。 - PositiveGuy

@PositiveGuy 好的，dist/ 不是绝对路径。绝对路径总是以 / 开头。 - hampusohlsson