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

Question

我应该在<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的index.bundle.js具有<script>。我希望<img src="dog.jpg">得到处理，但是不会发生。我哪里错了？谢谢。

Answer 1

默认情况下，每个本地用户都是必需的（require（'./ image.png'））。您可能需要在配置中为图像指定加载程序。我强烈建议您在这种情况下使用文件加载器或url加载器代替html加载器。实际上，在html-loader的github文档上仅表明了这一点。