从零搭建Webpack项目，HTML引入图片出现404错误求助

你遇到的核心问题是Webpack没有处理HTML中的图片路径，再加上当前配置里的小细节问题，导致图片加载失败。我帮你一步步梳理解决方案：

1. 先修正Webpack Output的配置错误 #

你的output.filename配置有问题，filename: "src/assets/js/index.[hash:8].js"会让Webpack在build文件夹下额外创建src/assets/js目录来存放打包后的JS，这会打乱输出结构，还会影响资源路径解析。建议改成：

output: {
    filename: "js/index.[hash:8].js", // 直接指定输出到build/js目录
    path: path.join(__dirname, 'build')
},

2. 让Webpack能处理HTML中的图片依赖 #

Webpack默认只会从entry入口解析JS/CSS里的资源依赖，HTML里的<img>路径不会被自动处理。你需要安装并配置html-webpack-plugin来解决这个问题：

第一步：安装插件 #

npm install html-webpack-plugin --save-dev

第二步：在Webpack配置中引入并配置插件 #

在配置文件顶部添加：

const HtmlWebpackPlugin = require('html-webpack-plugin');

然后在配置里新增plugins数组（如果已有就直接加进去）：

plugins: [
    new MiniCssExtractPlugin({
        filename: "css/styles.[hash:8].css" // 顺便修正CSS输出路径，和JS保持统一结构
    }),
    new HtmlWebpackPlugin({
        template: './src/index.html', // 你的源HTML文件路径
        filename: 'index.html' // 输出到build目录下的HTML文件名
    })
]

3. 调整HTML中的图片引入路径 #

用了html-webpack-plugin后，Webpack会帮你解析图片路径，所以要把图片路径改成相对于JS入口文件的路径，或者项目根目录的相对路径。假设你的源图片放在src/assets/img/logo-texte.png，HTML里应该写成：

<section class="header">
    <h1><img src='./assets/img/logo-texte.png' alt="Le Grand Dressing"/></h1>
</section>

如果是模块化开发，更推荐在JS中引入图片再动态插入：

// 在index.js中
import logo from '../img/logo-texte.png';

const headerImg = document.querySelector('.header h1 img');
headerImg.src = logo;

4. 优化File-loader的配置 #

你的file-loader配置基本没问题，可以把publicPath改成绝对路径（相对于build目录），避免路径层级混乱：

{
    test: /\.(png|svg|jpg|gif)$/,
    use: [
        { loader: 'file-loader', options: { publicPath: '/img/', outputPath: 'img' } }
    ]
},

最后别忘了重启webpack-dev-server，让所有配置生效。这样处理后，Webpack会正确把图片复制到build/img目录，同时替换HTML里的图片路径为打包后的正确路径，404问题就能解决了。

内容的提问来源于stack exchange，提问作者Bernabez