Webpack 5中HTML加载静态图片失败问题求助

• 修正HTML图片路径
  将<img src="/src/assets/images/pic.png">改为相对路径，假设你的index.html位于src/目录下，图片路径应为./assets/images/pic.png。绝对路径/src/...会被Webpack视为站点根路径资源，不会触发html-loader的解析处理。

• 调整html-loader配置（确保资源被解析）
  显式配置sources选项，确保html-loader正确识别并处理img标签的src属性：

  {
    test: /\.html$/i,
    loader: "html-loader",
    options: {
      sources: {
        list: [
          {
            tag: "img",
            attribute: "src",
            type: "src",
          },
        ],
      },
    },
  }
  

• 替换url-loader为Webpack 5原生Asset模块（推荐）
  Webpack 5已内置资源处理能力，无需依赖url-loader/file-loader，改用原生配置更稳定：

  {
    test: /\.(png|svg|jpe?g|gif)$/i,
    type: "asset",
    // 生成文件的命名规则
    generator: {
      filename: "images/[hash]-[name].[ext]"
    },
    // 小于8kb转base64的条件
    parser: {
      dataUrlCondition: {
        maxSize: 8000
      }
    },
  }
  

  配置后，Webpack会自动处理图片：小于8kb的转为base64嵌入HTML，大于的则输出到dist/images/目录，并自动替换HTML中的图片路径。

• 检查output的publicPath配置
  确保Webpack的output配置中publicPath设置正确，避免资源路径错误：

  output: {
    filename: "[name].bundle.js",
    path: path.resolve(__dirname, "dist"),
    publicPath: "./", // 确保相对路径资源能正确加载
    clean: true, // 可选，每次构建清空dist目录
  }
  

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