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

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

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

如果您觉得导入太多，可以在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时无法加载图像

1 个答案: