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.

Example

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

root
|__deploy
|  |
|  |__index.html
|  |__main.bundle.js
|
|__node_modules
|
|__src
|  |
|  |__app.js
|  |__component.js
|  |__image.js
|
|__package-lock.json
|__package.json
|__webpack.config.js
|__yinyang.png

The dependencies needed are:

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

#webpack