html-loader 没有得到正确的 img src 路径答案

【问题标题】：html-loader is not getting correct img src pathhtml-loader 没有得到正确的 img src 路径
【发布时间】：2021-07-18 21:25:08
【问题描述】：

（问题解决了！）

我正在尝试使用html-loader 和file-loader 来打包index.html img 标签src 属性中提到的图像源。

但它不起作用，因为 img 标签 src 没有引用正确的路径。

只是想知道我的配置有什么问题吗？

我的 github 测试仓库在这里：link

（既然问题解决了，我会将解决方案配置保留在分支“stackoverflow67250804”中）

我的webpack 配置：

const { resolve } = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');

module.exports = {
  entry: {
    main: ['./src/index.js', './src/scss/main.scss'],
  },
  output: {
    filename: '[name].js',
    chunkFilename: '[name].min.js',
    path: resolve(__dirname, 'build'),

  },
  mode: 'development',
  module: {
    rules: [
      {
        test: /\.html$/,
        use: [
          {
            loader: 'html-loader',
          }
        ],
      },
      {
        test: /\.scss$/,
        use: [
          'style-loader',
          'css-loader',
          'sass-loader'
        ]
      },
      {
        test: /\.(jpg|png|gif)$/,
        use: [
          {
            loader: 'file-loader',
            options: {
              name: '[name].[ext]',
              outputPath: '/img/',
              pubicPath: '/img/'
            }
          }
        ],
      }


    ]
  },
  plugins: [
    new CleanWebpackPlugin(),
    new HtmlWebpackPlugin({
      template: './index.html'
    })
  ]
}

./build 运行后的文件夹webpack

我的index.html （我还尝试将 img src 属性更改为“./img/women.jpg”或“/img/women.jpg”或“img/women.jpg”，但没有任何作用，只是让 webpack 编译错误..）

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <img src="./src/img/women.jpg" alt="">
</body>

</html>

在./build 文件夹中构建index.html （那么这是什么620b11833eb3b1be1f33.jpg？）

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
<script defer src="main.js"></script></head>

<body>
  <img src="620b11833eb3b1be1f33.jpg" alt="">
</body>

</html>

【问题讨论】：

我想你遇到了和我一样的问题，here 是我的问题。
@Daweed 我试过你的解决方案。它确实适用于我的 img src，但在编译 scss 背景图像 url 时失败了..
@Daweed 但我想你是对的，看来我必须为背景图像 url 编译添加一些配置设置。
是的，我没有使用 scss。
@Daweed 我试着按照这里的指南：webpack.js.org/guides/asset-modules，一切都像魅力：DD。非常感谢！

标签： javascript webpack

【解决方案1】：

我终于找到了解决办法。

我猜这个错误是由@Daweed 在顶部评论中提到的问题引起的。

我正在使用 webpack 5，但没有注意到 file-loader/url-loader/raw-loader 现在已弃用。

解决方案是从 dev-dependency 中卸载 file-loader/url-loader/raw-loader（记住还要删除所有相关的配置设置。），并按照指南here。

我现在的配置设置（解决了所有问题）如下：

const { resolve } = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');

module.exports = {
  entry: {
    main: ['./src/index.js', './src/scss/main.scss'],
  },
  output: {
    filename: '[name].js',
    chunkFilename: '[name].min.js',
    path: resolve(__dirname, 'build'),

  },
  mode: 'development',
  module: {
    rules: [
      {
        test: /\.html$/,
        use: [
          {
            loader: 'html-loader',
          }
        ],
      },
      {
        test: /\.scss$/,
        use: [
          'style-loader',
          'css-loader',
          'sass-loader'
        ]
      },
      {
        test: /\.(jpe?g|png|gif)$/,
        type: 'asset/resource',
        generator: {
          filename: 'img/[hash][ext]'
        }
      }


    ]
  },
  plugins: [
    new CleanWebpackPlugin(),
    new HtmlWebpackPlugin({
      template: './index.html'
    })
  ]
}

【讨论】：

【解决方案2】：

看起来file-loader 和html-loader 插件之间存在冲突，因此它会生成损坏的资产。

但是，html-loader 将负责加载所有图像 (supported sources)，我们不需要额外的插件 file-loader 来获得支持。

所以你可以通过删除 file-loader 配置来尝试

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

【讨论】：

【解决方案3】：

您能否尝试在根项目文件夹中创建一个public 文件夹并将您的图像放置在img 文件夹中（例如）。我认为这应该可以在没有任何配置的情况下开箱即用。然后引用图片为img/women.jpg

【讨论】：

我应该删除任何配置设置吗？我尝试 tp 在 root 中创建一个公用文件夹并更改了 img src ，但它只会导致编译错误:(
我把我的github testing repo放在最上面，也许你可以试试。
@Mizok.H 你能先检查this的答案吗？如果不起作用，我会尝试自己找到解决方案。