How to base64 images using webpack? - image

Question

I am using https://github.com/wbkd/webpack-starter for my project
I do have svg and png images that referenced in my html file like <img src="/public/image.png"/>
Instead of loading image using src path I want to inject image as base64 content to my html file to improve the page performance and to minify the number of server requests.
So I wonder how would you do that?
UPDATE:
here is what I did, but that does not work
npm install url-loader --save-dev
and add this configuration to production config:
module: {
rules: [
{
test: /\.(png|jpg|gif|svg)$/i,
use: [
{
loader: 'url-loader',
options: {
limit: false,
},
},
],
},
]
}
I tried to play with limit values but won't help.
Any ideas ?
UPDATE:
that is my current rules config, but nothing works, I also installed html-loader but no effect:
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: 'babel-loader',
},
{
test: /\.s?css/i,
use: [
MiniCssExtractPlugin.loader,
'css-loader',
'postcss-loader',
'sass-loader',
],
},
{
test: /\.(png|jpg|gif)$/i,
use: [
{
loader: 'url-loader',
options: {
limit: false,
},
},
],
},
{
test: /\.html$/i,
loader: 'html-loader',
},
],

Answer 1

Here's a few steps you should follow to sort your problem out:
Add html-loader to your webpack.config.prod.js:
webpack.config.prod.js
{
test: /\.html$/i,
loader: 'html-loader',
},
Fix your src of your <img /> to use the relative path instead of absolute path which doesn't work:
<img src="../public/image.png"/> // this is incorrect `/public/image.png`
Finally, add a publicPath to output in webpack.common.js to make it work properly with html-webpack-plugin:
webpack.common.js
{
output: {
// ...
publicPath: '/',
},
}

Answer 2

Make sure to set url-loader litmit to true. According to their docs, setting it to true is the default option and there's no limit to a file's size to be transformed into base64.
Setting it to false will not transform images to base64.
module: {
rules: [
{
test: /\.(png|jpg|gif|svg)$/i,
use: [
{
loader: 'url-loader',
options: {
limit: true,
},
},
],
},
]
}
Also, in order for images to be handled by webpack, you need to import them.
import MyImage from '../public/image.png'