Kết quả đầu ra Webpack đường dẫn sai cho hình ảnh

Question

Tôi đang xây dựng một trang web có phản ứng và webpack. Khi tôi xây dựng ứng dụng với webpack và cố gắng bao gồm hình ảnh, hình ảnh được ghi vào thư mục xây dựng cùng với các nội dung khác, nhưng liên kết đến hình ảnh mà đầu ra webpack không chính xác. Tôi có thể vào thư mục xây dựng và xem hình ảnh, vì vậy nó đang được sao chép chính xác nó là liên kết sai.

my phản ứng thành phần trông như thế này:

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

cấu hình Webpack của tôi trông như thế này:

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

Tôi đã đập đầu vào bức tường kể từ ngày hôm qua, vì vậy mọi sự giúp đỡ sẽ được đánh giá cao. Hãy cho tôi biết bạn cần thêm thông tin.

Cảm ơn!

Answer 1

Bạn có thể thử đặt tùy chọn tên cho trình tải tệp, cũng như output.publicPath.

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

...

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

Sau đó url giải quyết trong yêu cầu của bạn sẽ là:

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