Webpack2-如何从HTML要求图像

Question

Webpack claims to manage module dependencies including image files. I understand that the following webpack config allows me to require jpg files from JS/CSS:

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

using url(/image.png) or require('./image.png') , but how would I include an image from an HTML file?

<img src="/image.png">

I know I can use copy-webpack-plugin to copy over static files into the output directory, but I'm wondering if there is a way to require images directly from HTML.

Answer 1

'html-loader' will do this for you by default, however if you are reading this behavior from your main index.html page, you will need to make webpack treat it as module also. Luckily html-webpack-plugin can do this for you in conjunction with html-loader: html-webpack-plugin .