CODEWITHSUNDEEP
javascriptwebpack
vatosarmat
vatosarmat

Reputation: 1272

How to use html-loader with webpack 4?

What should I type in <img> 'src' attribute to make html-loader replace it with URL? Assume folder 'public' is served via webpack-dev-server, project layout looks like

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

webpack.config.js has rules for url-loader and html-loader:

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

index.js imports images:

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

And index.html has <script> for index.bundle.js. I expect <img src="dog.jpg"> to be processed, but this doesn't happen. Where am I wrong? Thanks.

Upvotes: 0

Views: 3078

Answers (1)

Gaurav Singh
Gaurav Singh

Reputation: 176

By default every local is required (require('./image.png')). You may need to specify loaders for images in your configuration. I would highly recommend you to use file-loader or url-loader in this scenario in place of html-loader. Infact on html-loader's github documentation only suggest this.

Upvotes: 0

Related Questions