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, is swimming in muddy waters. This is a quick and dirty crash course using Webpack 4 and Vanilla JavaScript (No Libraries and Frameworks). learning Webpack Open a new folder in your computer. Check that you have installed. Run and fill in the details. After that do: NodeJS npm init 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: , and Your structure should look something like this: alertbox.js write-text.js --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 statement that you see in there ( is also valid! ). import require 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 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. source code Building the project To build the project, launch a terminal or CMD/PowerShell window in the directory and do This will transpile your code into a main.js file that is going to be read by the browser. webpack Then open your and voila! No need to run on a Web Server. This works directly from double-clicking the index.html file. index.html

Including Files and Deeply Directories in Rust

SASS, LESS, CSS without JavaScript in Polymer 3 with Webpack

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

About Author

Comments

TOPICS

THIS ARTICLE WAS FEATURED IN

Related Stories

Untitled Story

Automate and Deploy a Docker Container to Google Cloud Run from Scratch Using Pulumi and Go

Top 10 Development Frameworks in 2020

4 Tips for Building the Ultimate Finance App

6 Reasons for Using Bootstrap Framework

6 Reasons Why No-Code Platforms are the Future Of Software Development

Automate and Deploy a Docker Container to Google Cloud Run from Scratch Using Pulumi and Go

Top 10 Development Frameworks in 2020

4 Tips for Building the Ultimate Finance App

6 Reasons for Using Bootstrap Framework

6 Reasons Why No-Code Platforms are the Future Of Software Development

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps