Webpack’s url-loader lets you import arbitrary files, like images. If you import a .png file, url-loader will ensure that import resolves to a Base64 string representing the contents of the file.


Here is an example to display a .png file using the url-loader option. The project directory looks like the following:

|  |
|  |__index.html
|  |__main.bundle.js
|  |
|  |__app.js
|  |__component.js
|  |__image.js

The dependencies needed are:

  • file-loader
  • html-webpack-plugin
  • url-loader
  • webpack
  • webpack-cli


How to Use Webpack's url-loader
2.15 GEEK