Javascript 使用HTMLWebpackPlugin时如何通过网页包加载图像？

我正在使用HTMLWebpackPlugin，在我的模板中有一个img标记：

<img src="./images/logo/png">

如果您注意到，这里我使用的是一个相对路径，认为webpack将触发在我的webpack.config.js文件中配置的文件加载器，但在编译之后，我在html中得到了完全相同的src属性：

<img src="./images/logo/png">

---

我如何触发webpack以动态地将这些相对路径替换为我在我的webpack配置中配置的任何路径？

我不是webpack专家，但我通过这样做来实现它：

<img src="<%=require('./src/assets/logo.png')%>">

根据文件：

默认情况下（如果您没有以任何方式指定任何加载程序），回退 洛达斯装载机启动

表示lodash模板

在幕后，它使用的是一个Web包子编译，它继承了 主配置中的所有加载程序

在img路径上调用

require

将调用文件加载程序

---

您可能会遇到一些路径问题，但它应该可以工作。

您应该使用

CopyWebpackPlugin

const CopyWebpackPlugin=require（'copy-webpack-plugin'）

这是将
src/assets/images
复制到您的“distfolder/images”。
使用html加载程序和html网页包插件为我工作

module: {
    rules: [
      {
         test: /\.(html)$/,
         use: ['html-loader']
      }
    ]
},
plugins: [
    new HtmlWebpackPlugin({
      template: './src/index.html'
    })
  ]

您可以在webpack配置中使用url加载器，将低于特定限制的图像添加到最终捆绑包中编码为base64 uri的图像中，并将高于该限制的图像添加为常规图像标记（相对于publicPath）

我在遵循Webpack提供的入门指南时遇到了这个问题。我使用的是指南中的模板代码和捆绑图像。但是，当将现有的普通html/js/css项目迁移到Webpack时，我发现，为了像我所希望的那样使用模板HTML加载（模板中包含图像资源的路径），我必须从
webpack.config.js
中删除
HTML加载程序的资产加载程序用法，以便正确解析它在
dist
中创建的新散列路径

要使用Webpack文档语法，请删除前缀为“-”的行，并添加前缀为“+”的行

我也是这样工作的。但问题是我使用的是自定义加载程序。具体来说，我用的是车把。而且它似乎不支持模板内的直接函数调用。其次，它看起来相当混乱。我不想一遍又一遍地这样做。我有几十个html页面，其中有很多图像。经过投票，但让我感到沮丧的是，没有一种简单的方法可以让非必需的图像源很好地使用这个插件。结果：
src=“[object Module]”
@arthur src=“[object Module]”通过在加载程序的rule.options部分设置esModule:false来解决。瞧，嗨，诺玛，我听了你的建议，但似乎这还不够。我得到错误“需要合适的加载器”。因此，您应该使用除htmlwebpackplugin和html之外的其他内容-loader@Denis是的，根据文件类型，您需要额外的加载程序。查看一些示例。这可以让WebPack在不使用require语句的情况下从HTML标记中提取（导入）图像，但它阻止了HTMLWebpackPlugin解释（不翻译文本），我找不到解决方法。看见
plugins:[
    ....
    new CopyWebpackPlugin({'patterns': [
        {from:'./src/assets/images', to:'images'}
    ]}),
    ....
]

module: {
    rules: [
      {
         test: /\.(html)$/,
         use: ['html-loader']
      }
    ]
},
plugins: [
    new HtmlWebpackPlugin({
      template: './src/index.html'
    })
  ]

module.rules.push({
  test: /\.(png|jp(e*)g|gif)$/,
  exclude: /node_modules/,
  use: [{ 
    loader: 'url-loader',
    options: {
      limit: 10000,
      publicPath: "/"
    }
  }]
})

module: {
  rules: [
    {
      - test: /\.(png|svg|jpg|jpeg|gif)$/i,
      - type: 'asset/resource',
      + test: /\.(html)$/,
      + use: ['html-loader'],
    }
  ]
}