Webpack2 - 如何从 HTML 获取图像

Question

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 获取图像。

Answer 1

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

Webpack2 - How to require an image from HTML