Brief Intro to Webpack 5
So I recently got introduced to webpack 5. Although I have heard the word “bundler” too often in my programming journey, I had not completely grasped what it meant. When I set out to learn about webpack, the questions I asked myself were: what exactly is webpack; what is it used for; what all the fuss about it was.
I will try and answer these questions briefly and then proceed to demo a quick and basic setup.
What is Webpack?
In its simplest form, webpack is a bundler. According to their official documentation,
“At its core, webpack is a static module bundler for modern JavaScript applications. When webpack processes your application, it internally builds a dependency graph from one or more entry points and then combines every module your project needs into one or more bundles, which are static assets to serve your content from.”
and according to Wikipedia,
“Webpack is an open-source JavaScript module bundler. It is made primarily for JavaScript, but it can transform front-end assets such as HTML, CSS, and images if the corresponding loaders are included. Webpack takes the dependencies and generates a dependency graph allowing web developers to use a modular approach for their web application development purposes.”
The two jargons we can easily notice from both definitions are module bundler and dependency graph. I will try to explain these words in the following section.
What is it used for?
As stated earlier, webpack is a tool that bundles every module in a project into one or more bundles and creates a dependency graph in the process. So what does the phrase “module bundler” actually mean?. Before we completely grasp a full understanding of what a bundler is, we have to first understand what a “module” is.
A module in its literal terms can be used to refer to each of a set of standardized parts or independent units that can be used to construct a more complex structure. In programming terms, this can mean individual files or programs that can be put together to form a complex program structure.
In relation to webpack, a module bundler is a tool that brings bits of Javascript files and their dependencies and bundles them into one or more modules.
This brings us to the part where it creates a dependency graph.
A dependency graph is a data structure formed by a directed graph that describes the dependency of an entity in the system on the other entities of the same system. The underlying structure of a dependency graph is a directed graph where each node points to the node on which it depends.
Webpack generates this dependency graph and uses it to identify which modules or resources to bundle together. It does this in two main stages, namely:
- Dependency Resolution
- Packing
In the dependency resolution stage, it searches for all dependencies of the code(by identifying the numbering of nodes) starting from the entry point and then goes ahead to construct the dependency graph. After which it packs and converts this dependency graph into a single unit.
Frequently Used Words/Phrases
Below are a brief explanation of the most frequently used words when working with webpack.
Entry/ Entry Point
An entry or entry point indicates which file or module webpack is instructed to start building out its internal dependency graph. From this module, webpack will figure out all which other modules or libraries it depends on.
One or more entry points can be explicitly specified in a webpack configuration file, else it will default to ./src/index.js
webpack.config.js
module.exports = {
entry: './my/own/path/file.js',
};Output
The output property is used to instruct webpack where to emit the bundles(usually as files) it has created and how to name them. If no output path or folder is specified in the then it will default to the ./dist folder.
The output can be configured in the configuration file like below:
const path = require('path');
module.exports = {
entry: './path/to/my/entry/file.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'my-first-webpack.bundle.js',
},
};Loaders
Loaders are packages that allow webpack to process other types of files(CSS, SCSS, images, etc) and convert them into modules that can be added to the dependency graph and consumed by the application. This is because webpack only understands JavaScript and JSON files. The two properties of the loader in a configuration file are the test(checks which file type to be loaded) and use(checks loader to the used)
const path = require('path');module.exports = {
entry: './path/to/my/entry/file.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'my-first-webpack.bundle.js',
},
module: {
rules: [{ test: /\.css$/i,use: ['style-loader', 'css-loader']
}],
},
};
Plugins
These are used to perform tasks like bundle optimization, asset management, and injection of environment variables. To use a plugin, it has to be required in the configuration file using require() and then it is added as an instance in the plugins array.
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');//installed via npm
const webpack = require('webpack'); //to access built-in pluginsmodule.exports = {
entry: './path/to/my/entry/file.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'my-first-webpack.bundle.js',
},
module: {
rules: [{ test: /\.css$/i,use: ['style-loader', 'css-loader']
}],
},
plugins: [new HtmlWebpackPlugin({ template: './src/index.html' })],
};
Mode
This can be used to set the webpack environment to either development, production, or none. It defaults to productions when it is not explicitly declared. When set, it can enable webpack built-in optimizations that correspond to the specified environment.
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');//installed via npm
const webpack = require('webpack'); //to access built-in pluginsmodule.exports = {
mode: 'development',
entry: './path/to/my/entry/file.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'my-first-webpack.bundle.js',
},
module: {
rules: [{ test: /\.css$/i,use: ['style-loader', 'css-loader']
}],
},
plugins: [new HtmlWebpackPlugin({ template: './src/index.html' })],
};
Next Steps
This article introduces you to webpack and explains some of its most used terminologies. In the next article, we will configure a basic webpack setup.
If you learned or had fun reading then kindly drop as many claps as you like.
