使用带有 HMR 配置的 webpack-dev-server 时无法加载图像答案

【问题标题】：can't load images when using webpack-dev-server with HMR config使用带有 HMR 配置的 webpack-dev-server 时无法加载图像
【发布时间】：2017-06-09 14:37:33
【问题描述】：

我使用 webpack2 创建了一个 React 项目，并使用 webpack-dev-server 预览了结果。起初，我只是使用 CLI 来启用 HMR，如下所示：

webpack-dev-server --inline --hot

一切正常。

然后，我想通过设置 webpack.config.js 来启用 HMR，但失败了。浏览器不显示图像，控制台总是显示 404 错误，如下所示：

image for error info

我找了一天的方法，修改了很多次配置文件，但没有任何区别。任何帮助将不胜感激。

我的项目结构：

|--dist
|  |--index.html
|--src
|  |--images
|  |  |--logo.png
|  |--js
|     |--components
|     |  |--pc_header.js
|     |--index.js
|--package.json
|--webpack.config.js

package.json

"babel": {
  "presets": [
    [
      "es2015",
      {
        "modules": false
      }
    ],
    "react"
  ],
  "plugins": [
    "react-hot-loader/babel"
  ]
}

webpack.config.js

module.exports = {
context: path.resolve(__dirname, "src"),

entry: [
    'react-hot-loader/patch',
    'webpack-dev-server/client?http://localhost:8080',
    'webpack/hot/only-dev-server',  
    './index.js'
],

output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname,'dist'),
    publicPath: '/'
},

devtool: 'inline-source-map',

devServer: {
    hot: true,
    contentBase: path.resolve(__dirname, 'dist'),
    publicPath: '/'
},

module: {
    rules: [
        {
            test: /\.jsx?$/,
            exclude: /node_modules/,
            use: [
                {
                    loader: 'babel-loader',
                    options: {
                        presets: ['react', 'es2015']        
                    }
                }
            ]
        },
        {
            test: /\.css$/,
            use: ExtractTextPlugin.extract({
              fallback: 'style-loader',
              use: 'css-loader'
            })
        },
        {
            test: /\.(png|jpe?g|svg)$/,
            use: ['file-loader?name=/img/[name].[ext]']
        }
    ]
},

plugins: [
    new webpack.HotModuleReplacementPlugin(),
    new webpack.NamedModulesPlugin(),
    new ExtractTextPlugin({
        filename: 'css/[name].css'
    })
]

};

index.html

<body>
<div id="mainContainer">
</div>
<script src="bundle.js"></script>
</body>

pc_header.js

render(){
  return (
     <img src='../../images/logo.png' alt="logo"/>
}

可能是我的路径配置有问题，但我尝试了各种路径配置，并在文件 pc_header.js 中使用 import LogoImg from "../../images/logo.png"，都失败了。现在我不知道这个头痛。

【问题讨论】：

标签： reactjs webpack webpack-dev-server webpack-hmr

【解决方案1】：

首先在你的 webpack 配置中，你的图片文件加载器是：['file-loader?name=/img/[name].[ext]']，它将把图片输出到/img/name.ext

但您使用的是/image/。

但是，最好这样做

import logo from '../../logo.png';

在你的组件中

然后

只需将其用作变量<img src={logo} alt="logo"/>

所以 webpack 会为你处理路径。让 webpack 处理路径的原因是你可以利用组件保存图像的优势，例如：

|--MyComponent
|    |-- component.js
|    |-- images
|        |---a.png
|        |---b.png

但是当您为生产构建时，您可以将所有内容放在一个文件夹中，例如assets/images

如果你觉得导入太多，可以在 images 文件夹中创建一种 index.js

例如。

export { default as a } from './a.png;
export { default as b } from './b.png;
export { default as c } from './c.png;

然后

import {a, b, c } from './images';

【讨论】：

首先，我把use: ['file-loader?name=/img/[name].[ext]']改成use: ['file-loader?name=/images/[name].[ext]']，同样使用<img src='../../images/logo.png' alt="logo"/>，控制台也显示错误logo.png:1 GET http://localhost:8080/images/logo.png 404 (Not Found)。其次，在配置文件中，我也使用use: ['file-loader?name=/images/[name].[ext]']，在我的组件中，使用import logo from '../../images/logo.png'，错误变为images/logo.png:1 GET http://images/logo.png net::ERR_NAME_NOT_RESOLVED。可能我没听懂你的想法……
请把['file-loader?name=images/[name].[ext]']前面的斜线去掉，也可以试试console.log(logo);在你的渲染方法中？并确保你使用src={logo}
非常感谢。前面的斜线骗了我，去掉后，前面的两种方法都有效。出于好奇，如果我的应用程序需要更多<img>，我是否必须越来越多地使用import pic from "... ..."？对许多import?
最后，您输入的图片网址的次数相同，我更新了答案
您的详细回答完美解决了我的问题。感谢您的耐心和善意！