Webpack in practice

Introduction

Sorry for skipping an issue last week, I had a tough exam coming up and needed to put some extra hours in.

In the last article, we took a glimpse of Webpack. Today, we would look at how to use Webpack in our project and what all those itsy bitsy bits of code mean.

Pre-requisites

Knowledge of basic git commands
How folders and files are arranged in computers

Setting up the folder

Let's get our folder compatible with npm. Before now, you should have npm installed on your device.

mkdir webpack-demo
cd webpack-demo
npm init -y
npm install webpack webpack-cli --save-dev

Create a new folder
Go into the folder
Use the -y flag to answer yes to all specs of the package.json file
Use the package manager to install webpack

Making the project

Let's begin by making a dummy project to test out the effectiveness of webpack

touch index.html
mkdir src
cd src
touch index.js

function component() {
  const element = document.createElement('div');
  // Lodash, currently included via a script,
  // is required for this line to work
   element.innerHTML = _.join(['Hello', 'webpack'], ' ');
   return element;
   }

   document.body.appendChild(component());

Paste these lines of code in your index.js

Create a src folder and move into it
Create a JS file and put in a few lines of code.
The code model is copied from the Webpack documentation and uses a package called lodash.

Link the script to your HTML

In the HTML file, we are going to link to our Javascript file. If you look at how lodash is used in this project, we recall that this is the old way of linking packages.

Paste this HTML snippet into your HTML.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Getting Started</title>
<script src="https://unpkg.com/lodash@4.17.20"></script>
</head>
<body>
<script src="./src/index.js"></script>
</body>
</html>

Bundling - The part we love

As we can see from the index.html file, the package(dependency) lodash is directly called in the HTML folder. Apart from the fact that working with hundred packages this way can cause a psychotic breakdown. Some reasons are:

The browser would still have to download the script files if a dependency is included in the HTML tag but not used.
If a dependency is not included correctly or missing, our website might misbehave.

So let's avoid a psychotic breakdown and bundle this project. First, there are two things to understand, one is that by default Webpack designates our entry file to be in the file path: ./src/index.js. Secondly, Webpack bundles our files into a file in the file path: ./dist/main.js.

These behaviors can be configured, but we will do that later. Now let's bundle...

Step 1

Make your folder structure look like this by creating a dist and src folder and put the index.html and index.js files inside.

webpack-demo
  |- package.json
  |- package-lock.json
  |- /dist
    |- index.html
  |- /src
    |- index.js

Step 2

Install lodash

npm install --save lodash

Step 3

Go to your index.js in your src folder and add this line of code to the top of your file

 import _ from 'lodash'; // Add this

This just tells Node to take the Lodash package you installed in your project folder using npm and use it in this file.

Step 4

Rearrange your scripts in index.html. Remember that Webpack bundles the entry files and their dependencies into a ./dist/main.js file by default. So let's link our index.html to main.js.

 <!DOCTYPE html>
 <html>
 <head>
 <meta charset="utf-8" />
 <title>Getting Started</title>
 </head>
 <body>
 <script src="main.js"></script>
 </body>
 </html>

Step 5

Now that we have everything ready, let's bundle. Run this LOC(Line of Code) in your command line:

npx webpack

npx stands for Node package execute. This tells Webpack to look at the entry file which by default is ./src/index.js, and bundle its code, dependencies(in this case, lodash), and lodash's dependencies into a default output file,./dist/main.js.

As long as your index.html is linked directly to the .dist/main.js, your output will show correctly. If it does not, don't hesitate to DM me.

Now check ./dist/main.js and behold the wonders of Tobias Koppers.

Configuration

Webpack gives us the ability to name our entry and output files and carry out other configurations with a file called webpack.config.js . It is like a package.json but for webpack only.

Create your webpack.config.js file. I did mine with the terminal.

touch webpack.config.js

Inside the webpack.config.js , write your script

const path = require('path');
module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'mainest.js',
    path: path.resolve(__dirname, 'dist'),
    },
};

path is a Node.js native utility that allows us(developers) to work with file paths.
module.exports allows customization of entry paths and the output path(File and Folder to store bundled code)
filename is the name of the output file, and path is the folder you want to store the output file.

Rerun your code

Due to the fact that you can run webpack with different configuration files, you can run webpack with a specified configuration file in this way

npx webpack --config webpack.config.js

or just use the normal LOC because Webpack will use the default webpack.config.js to configure Webpack

 npx webpack

Conclusion

In the articles prior to this series, we have been looking at bundling in theory, but in this article, I hope we visualized how tools like webpack bundle our files into one as seen in the dist folder.

Now in the next article, we will look at more advanced features of webpack.

Please, How would you rate this article?

Xylophone