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');//创建故事组件module.exports = React.createClass({渲染:函数(){返回 (<div className="col_12 footer-right mobile-foot"><img src={newsFeedIcon}/><p><a href="/about">关于我们</a>|<a href="/contact">联系我们</a>|<a href="/faq">常见问题</a>|<a href="/media">媒体</a>|<a href="#">隐私声明</a>|<a href="#">服务条款</a></p>

);}})

我的 Webpack 配置如下:

 webpack: {客户: {条目:__dirname + '/app/js/client.jsx'，输出: {路径:'构建/'，文件:'bundle.js'},模块: {装载机: [{测试:/.jsx$/,loader:'jsx-loader'},{测试:/.css$/,loader: "style-loader!css-loader"},{测试:/.(eot|woff|woff2|ttf|svg|png|jpg)$/,loader: 'url-loader?limit=30000&name=[name]-[hash].[ext]'},{测试:/.jpe?g$|.gif$|.png$/i，加载器:'文件加载器'},{测试:/.jpg/,加载器:'文件'}]}},测试: {条目:__dirname + '/test/client/test.js',输出: {路径:'测试/客户端/'，文件:'bundle.js'},模块: {装载机: [{测试:/.jsx$/,loader:'jsx-loader'}]}},业力测试:{条目:__dirname + '/test/karma_tests/test_entry.js'，输出: {路径:'test/karma_tests/',文件:'bundle.js'},模块: {装载机: [{测试:/.jsx$/,loader:'jsx-loader'}]},背景:真实}},

从昨天开始我就一直在用头撞墙，所以任何帮助都将不胜感激.让我知道您需要更多信息.

谢谢！

解决方案

您可以尝试为 file-loader 设置 name 选项，以及 output.publicPath.

 输出:{路径:'构建/'，文件:'bundle.js'，公共路径:'/资产'}

...

<代码>{测试:/.(png|jpg)$/,loader: 'file-loader?name=/img/[name].[ext]'}

那么您的需求中解析的网址将是:

/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屋！