如何在 webpack 4 中使用 html-loader？答案

【问题标题】：How to use html-loader with webpack 4?如何在 webpack 4 中使用 html-loader？
【发布时间】：2019-08-25 03:28:13
【问题描述】：

我应该在<img> 'src' 属性中输入什么以使html-loader 将其替换为URL？假设文件夹“public”是通过 webpack-dev-server 提供的，项目布局看起来像

- src
  - index.js 
- img
  - dog.jpg
  - cat.jpg
- public
  - index.html

webpack.config.js 有 url-loader 和 html-loader 的规则：

{ test: /\.(png|jpg)$/, loader: 'file-loader' },
{ test: /\.(html)$/, loader: 'html-loader'},

index.js 导入图片：

import './../img/cat.jpg'
import './../img/dog.jpg'

并且 index.html 有 <script> 用于 index.bundle.js。我希望<img src="dog.jpg"> 被处理，但这不会发生。我哪里错了？谢谢。

【问题讨论】：

这里回答了这个问题。它现在应该关闭。 stackoverflow.com/questions/47126503/…

标签： javascript webpack

【解决方案1】：

默认情况下，每个本地都是必需的 (require('./image.png'))。您可能需要在配置中为图像指定加载器。我强烈建议您在这种情况下使用 file-loader 或 url-loader 代替 html-loader。 Infact on html-loader 的 github 文档只建议这样做。

【讨论】：