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

Question

我用 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"/>
}

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

Answer 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

如果觉得import太多，可以在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';

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

can't load images when using webpack-dev-server with HMR config

reactjs

webpack

webpack-dev-server

webpack-hmr