10,021 reads

A dead simple Webpack 4 example with vanilla JavaScript (No Libraries and Frameworks)

by Jose Javi AsilisAugust 23rd, 2018

Too Long; Didn't Read

Grab the repo <a href="https://github.com/superjose/webpack-simple-example" target="_blank">here</a>!

Companies Mentioned

featured image - A dead simple Webpack 4 example with vanilla JavaScript (No Libraries and Frameworks)

Grab the repo here!

This is a response to a Stack Overflow question. I figured out that there are people out there that may need this, even though it may look silly, at the very beginning, learning Webpack is swimming in muddy waters. This is a quick and dirty crash course using Webpack 4 and Vanilla JavaScript (No Libraries and Frameworks).

Open a new folder in your computer. Check that you have NodeJS installed. Run npm init and fill in the details. After that do:

npm install webpack-cli -D
npm install webpack

Create (index.html, index.js) with the following folder structure:

--index.html--src/-—----index.js

Inside index.html, add the following:

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Webpack Simple Example</title></head><body><h1>Welcome!! This is Webpack simple example</h1><button id="js-button">Alerts the user!</button><button id="js-write-text-button">Write text to the p tag!</button><p></p><script src="./dist/main.js"></script></body></html>

This should look like this:

The output of the HTML file

We’re going to use Webpack in order to create an alert to the user when it clicks the “Alerts the user!” button, and write some random text when the user clicks “Write text to the p tag”

Since we’re learning the basics, we’ll create 2 additional files: alertbox.js , and write-text.js Your structure should look something like this:

--index.html--src/-—----alert-box/-—-------------/alert-box.js-—----write-text/-—-------------/write-text.js

Inside alert-box.js, we’ll write:

/*** This format uses the ES2015/ES6 class.* You define an export before 'class' and you then import* it by referencing the path of this file and then referring it* with curly braces:** import { AlertBox } from './alert-box/alert-box;* Note that AlertBox is the same name as your class!**/

export class AlertBox {

sayHi() {alert("Hello 😊");}}

This is an ES2015/ES6 class. We can include it in our scripts by doing import {AlertBox} from './alert-box/alert-box';

Inside write-text.js, we’ll have:

/*** We pass the actual <p></p> tag by searching it with* document.querySelector* @param {} p*/

module.exports = (p) => {p.innerHTML = 'Hello! From hidden text ';}

Which this is a traditional module.exports method on how to export (pun not intended) your code from a file.

Finally, in our index.js, we bring them all together:

import { AlertBox } from './alert-box/alert-box';import writeText from './write-text/write-text';

// Since it's a class, we need to instantiate it before we can use it.

const alertUser = new AlertBox();

document.addEventListener('DOMContentLoaded', () => {const alertButton = document.getElementById('js-button');alertButton.addEventListener('click', alertUser.sayHi);const pTagButton = document.getElementById('js-write-text-button');

const pTag = document.querySelector('p');

/*** This is another variation. We create an anonymous function (Search more about it online)* and we call the function.*/

pTagButton.addEventListener('click', () => {writeText(pTag)});});

There’s a lot going on. First of all we need to import the alert-box and write-text files into our code. We do this by using the import statement that you see in there (require is also valid! ).

One of them is a ES2015 class (AlertBox), we need to instantiate it before we can use it, that’s why we do const alertUser = new AlertBox();

Applying Event listeners

This is where magic happens. Event Listeners are the “Webpack-way” of adding functionality to your DOM elements. This happens because Webpack scopes the function names and make them hard to access via the global scope (If this was too technical, just think that you can’t access them as you used to do it). The reason is that when building complex applications, there are many classes that may override each other or may have similar names. This avoids the problem.

I’m going to stop the explanation here, and encourage you to check the source code for more detailed information. Is good practice that you do this, since there will be dark times that you will have to dig into to find the root cause of your problem.

Building the project

To build the project, launch a terminal or CMD/PowerShell window in the directory and do webpack This will transpile your code into a main.js file that is going to be read by the browser.

Then open your index.html and voila! No need to run on a Web Server. This works directly from double-clicking the index.html file.