Webpack2 - 如何从 HTML 中获取图像答案

【问题标题】：Webpack2 - How to require an image from HTMLWebpack2 - 如何从 HTML 中获取图像
【发布时间】：2017-06-22 01:06:47
【问题描述】：

Webpack 声称可以管理模块依赖项，包括图像文件。我了解以下 webpack 配置允许我要求来自 JS/CSS 的 jpg 文件：

module.exports = {
  module: {
    rules: [
      {
        test: /\.jpg$/,
        use: [ 'file-loader' ]
      }
    ]
  }
}

使用url(/image.png) 或require('./image.png')，但如何包含来自 HTML 文件的图像？

<img src="/image.png">

我知道我可以使用 copy-webpack-plugin 将静态文件复制到 output 目录中，但我想知道是否有办法直接从 HTML 中获取图像。

【问题讨论】：

【解决方案1】：

'html-loader' 默认情况下会为您执行此操作，但是如果您从主 index.html 页面读取此行为，则需要让 webpack 也将其视为模块。幸运的是 html-webpack-plugin 可以与 html-loader 一起为您执行此操作：html-webpack-plugin。

【讨论】：