Webpack in practice
Setting up webpack
Life is becoming more interesting every day...
Currently, I am invested in being a better backend engineer, and also a medical doctor in training.
I have a keen interest in cloud engineering, biotechnology and molecular biology, and a fascination with VR.
In my free time, I enjoy reading, playing strategy games, experiencing music, and exploring philosophy.
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.jsonfileUse 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
srcfolder and move into itCreate 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'),
},
};
pathis a Node.js native utility that allows us(developers) to work with file paths.module.exportsallows customization of entry paths and the output path(File and Folder to store bundled code)filenameis the name of the output file, andpathis 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?
