Loading images with webpack

How do I configure webpack to process <img src="local_path">?

[Sayan751]

@DennisDyallo Here is a minimalistic example of what I meant. https://github.com/Sayan751/au2-webpack-img-demo

Note that there are 2 images one small and another is large. The images are imported as follows:

https://github.com/Sayan751/au2-webpack-img-demo/blob/d3a3296ace80dbc1756b69dab08637eb78f6a7e9/src/app.ts#L3-L10

And used like this

https://github.com/Sayan751/au2-webpack-img-demo/blob/d3a3296ace80dbc1756b69dab08637eb78f6a7e9/src/app.html#L1-L10

Depending on your webpack config, the images are loaded using the http: scheme or the data: scheme (for smaller images).

https://github.com/Sayan751/au2-webpack-img-demo/blob/d3a3296ace80dbc1756b69dab08637eb78f6a7e9/webpack.config.js#L30

When you build the app, this is how the output looks like. Note that the larger image name is replaced with webpack-friendly id.

[3cp]

I think our webpack loader should support the result of html-loader, so that we can chain them. Let the html-loader process it first, then our loader. I will get back to you on this.