Webpack 4 Vanilla JS Example No Libraries

A dead simple Webpack 4 example with vanilla
JavaScript (No Libraries and Frameworks)
hackernoon.com/a-dead-simple-webpack-4-example-with-vanilla-javascript-no-libraries-and-
frameworks-8b9d0a7684be
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>
1/4
</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:

2/4
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.
Continue the discussion
More by Jose Javi Asilis

More Related Stories
3/4
4/4

Webpack 4 Vanilla JS Example No Libraries

Загружено:

Сведения о документе

Исходное описание:

Оригинальное название

Авторское право

Доступные форматы

Поделиться этим документом

Поделиться или встроить документ

Параметры публикации

Этот документ был вам полезен?

Это неприемлемый материал?

Авторское право:

Доступные форматы

Webpack 4 Vanilla JS Example No Libraries

Загружено:

Авторское право:

Доступные форматы

A dead simple Webpack 4 example with vanilla

JavaScript (No Libraries and Frameworks)

Grab the repo here!

npm install webpack-cli -D

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

Inside index.html, add the following:

This should look like this:

The output of the HTML file

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

export class AlertBox {

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

module.exports = (p) => {

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

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

const alertUser = new AlertBox();

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

Applying Event listeners

Building the project

Continue the discussion

More by Jose Javi Asilis

Вам также может понравиться