Creating modules in JavaScript using Webpack and Babel — Part 1
Web development is growing fast, and new technologies are showing up day by day. 10 years ago, the UI of almost all the websites was made with just HTML/CSS and JavaScript. Nowadays, frontEnd developers need to learn node.js, webpack, some other useful dependencies (like babel) and at least one powerful framework (such as React.js, Vue.js… etc).
It’s great to be familiar with webpack and package.json before moving on to learn one of these frontEnd frameworks, that’s why I decided to write this article to remove the blur of those concepts.
First of all, let’s define these concepts:
- JavaScript module: a separate JS file where you have a class or a specific function that does a specific job and fairly need to call it many times.
- Webpack: webpack is a dependency that allows you to import and export separate JS files.
- Babel: is also a dependency. It will compile your ES6+ code into a plain JavaScript code (ex:
constwill be converted intovar) so even when the user is using an old browser, your app will be compatible with that old browser.
Prerequisites:
Now, after understanding what each concept means, let’s check the prerequisites that we need to be able to set our app environment.
You need to have a modern Code Editor, such as VSCode, and Node.js to be able to use the Node Package Manager (npm) in your terminal. So, if you don’t have these 2 installed on your local machine, please download and install them in order to be able to write and run the code.
Initializing package.json and webpack.config.js files:
Now, before you open up VSCode, create a folder to save your project in. Open up VSCode and on the top left click on file and then click on Open folder and choose the folder you just created for your project. Open the terminal by pressing Ctrl + Backticks or by clicking on terminal -> new terminal.
In your integrated terminal, type npm init -y to initialize a package.json file. Now you need to create a new file in the root directory called webpack.config.js which will handle the configuration of webpack.
Understanding the job of Webpack and manage project folders:
Now let’s explain what Webpack is gonna do. Webpack is gonna generate one big file that gathers all your JS files together and this file is the only required file that will be included in your HTML doc. You can call the generated file whatever you want, but it’s common to call it bundle.js and it’s also common to call your main JS file (that will import the other modules) index.js. Also, to design your folders professionally, you should create a folder called dist that will handle the bundled code and the HTML doc and create another folder called src to handle the main JS file, the other modules and of course your CSS files. Now your project root directory should look something like this:
Inside the dist folder, let’s create index.html and put these lines of code inside of it:
<!DOCTYPE html>
<html lange="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Webpack tutorial</title>
</head>
<body></body>
</html>
Now let’s call the bundled file in our HTML doc. Put this line of code right before the body closing tag: <script src="./bundle.js"></script>. Let’s also create the main JS file that we talked about in the src folder. Create a file called index.js inside your src folder. Type there alert('Hello, World!');.
Webpack configuration:
Now let’s get back to the webpack.config.js file. We need to structure that file in order to let Webpack know where is our main JS file and where to generate our bundled file. So we need to tell him about the entry point of our code and the output directory. At the very first line of it let’s require path with the line of code: const path = require('path');. Now copy and paste these lines of code to let Webpack know where to look for the source code and where to generate it:
module.exports = {
entry: './src/index.js',
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist'),
},
};Installing and running webpack:
So, it’s time to install Webpack. Run npm install -D webpack webpack-cliin your terminal to install webpack, and then run npx webpack --mode developmentto generate the bundled file. You can now open up the index.html file in the browser and an alert will show up to you with the sentence Hello, World!.
Congratulations 🥳 . You’ve installed Webpack correctly and now you’re able to create different modules and run them together in one file.
npx webpack, npx webpack — watch and npm run start:
Let’s change the code inside index.js and check if the page is gonna change: instead of alert('Hello, World!); type alert("I'm a new text"); and refresh the page in the browser. It didn’t work right?? Yes, that’s because we need to run npx webpack --mode developmentwhenever we make any change to index.js file. Run that command and refresh the page again. Great, it’s working again. But it’s annoying to run that command whenever we make any change to our code. Luckily, we can force webpack to watch our code and bundle the code whenever we make any change. This can be done by running this little code npx webpack --watch --mode development. However, we can handle that command in our package.json file by adding"start": "webpack --watch --mode development",to the scripts property. To test it, kill the terminal by pressing Ctrl + c and run npm start. Boom, now webpack is watching our code, so whenever we make any change to index.js file, the bundle.js file will be changed too.
This is enough for the first part of this tutorial. If you want to know how to install babel and bundle the css files in your bundle.js file, read Creating modules in JavaScript using Webpack and Babel — Part 2. You can download the source code of this part from this link.
