Loading images

by Sai gowtham1min read

To load images we need to use url-loader and file-loader.

npm install -D  url-loader file-loader

Add a new rule to the array


  test: /\.(png|jpg|gif|jpeg|ttf)$/,
    use: [
        loader: 'url-loader',
        options: {
            limit: 8000

Url-loader helps us to the load images as a base64 format if the image size is more than 8kb it will add an image instead of inlining it as a base64.


const btn = document.querySelector('.btn');
const title = document.querySelector('.title');
import './style.css';
import fan from './fan.jpg';

let active = false;

const img = document.createElement('img');
img.src = fan;


function changeColor() {

    active = !active
    if (active) {
        btn.className = 'gold'
        title.style.color = 'blue'
    } else {
        title.style.color = 'black'

export default changeColor

webpack loading images