Webpack输出错误的图像路径 [英] Webpack outputs wrong path for images

问题描述

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

我的反应组件如下所示：

 'use strict'; var React = require（'react'）; var newsFeedIcon = require（'../../ img / news-feed-icon.png'）; //创建故事componentmodule.exports = React.createClass（{render：function（） {return（< div className =col_12 footer-right mobile-foot>< img src = {newsFeedIcon} />< p>< a href =/ about>关于我们< / a> ; |< a href =/ contact>联系我们< / a> |< a href =/ faq> FAQ< / a> |< a href =/ media> Media< / a> |< a href =＃>隐私声明< / a> |< a href =＃>服务条款< / a>< / p>< / div>）; }}） 

我的Webpack配置如下所示：

  webpack：{client：{entry：__dirname +' /app/js/client.jsx'，输出：{path：'build /'，file：'bundle.js'}，module：{loaders：[{test：/\.jsx$/,loader:'jsx -loader'}，{test：/\\\ css $ /，loader：style-loader！css-loader}，{test：/\。（eot | woff | woff2 | tttf | 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'，输出：{path：'test / clien t /'，file：'bundle.js'}，module：{loaders：[{test：/\。jsx $ /，loader：'jsx-loader'}]}}，karma_test：{entry：__dirname +' /test/karma_tests/test_entry.js'，输出：{path：'test / karma_tests /'，file：'bundle.js'}，module：{loaders：[{test：/\。jsx $ /，loader： 'jsx-loader'}]}，background：true}}， 

<从昨天开始，我一直在撞墙，所以任何帮助都会受到赞赏。让我知道您需要更多信息。

谢谢！

解决方案

您可以尝试为文件加载器设置名称选项，以及 output.publicPath 。

 输出：{
路径：'build /'，
 file：'bundle.js'，
 publicPath：'/ assets'
} 
  

...

  {
 test：/\。（png | .jpg）$ /，
 loader：'file-loader？name = / img / [name]。[分机'
} 
  

然后您需要的已解析网址将是：

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

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.

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: {
      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!

解决方案

You could try setting the name option for file-loader, as well as 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

这篇关于Webpack输出错误的图像路径的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！