<file_sep>import helloWorld from './hello-world';
import addImage from './adding-image';
import HelloButton from './components/Hello-button/Hello-button';
import CustomButton from './components/Custom-button/CustomButton';

helloWorld();

addImage();

const helloButton = new HelloButton();
helloButton.render();

const customButton = new CustomButton();
customButton.render();
<file_sep>npm install sass-loader node-sass webpack --save-dev
<file_sep>import lionImg from '../images/lion.jpg';

export default function addImage() {
  const img = document.createElement('img');
  img.alt = 'lion image';
  img.title = 'title image';
  img.src = lionImg;
  img.width = 300;

  const body = document.querySelector('body');
  body.appendChild(img);
}
<file_sep>import './CustomButton.scss';

class CustomButton {
  buttonCssClass = 'custom-button';

  render() {
    const button = document.createElement('button');
    const body = document.querySelector('body');
    button.innerHTML = 'Custom Button';
    button.onclick = function() {
      const p = document.createElement('p');
      p.innerHTML = 'Custom Text';
      p.classList.add('custom-text');
      body.appendChild(p);
    };

    // button.classList.add('custom-button');

    button.classList.add(this.buttonCssClass); //this will work after setting up babel loader to support ES6 features

    body.appendChild(button);
  }
}

export default CustomButton;
