Introduction to Webpack 5

Basic understanding of what is webpack and how it works and why it is used in most of the modern JavaScript applications.

What is webpack

Module Bundler — A tool that takes JavaScript & its dependencies and bundles them into a single / multiple files (to use in browser).

Dependency Graph — A graph that maps all the dependencies between files based on the order / hierarchy in which it is used or referenced.

Webpack builds and loads modules synchronously. It converts dependencies into modules and pulls the dependencies and modules at the right time in the right scope. Finally, it loads all these modules and dependencies into one or few files and downloads it in the browser (when requested).

webpack requires a configuration file to bundle your project. Webpack, by default has a default configuration once you install it (using NPM).
But webpack allows you to incredibly configure it based on your project needs and requirements.

The basic webpack configuration file looks something like this:

To understand the webpack configuration and to get started, First you need to know the core concepts of webpack:

  1. Entry
  2. Output
  3. Loaders
  4. Plugins
  5. Mode

Mode

There are three modes:
1. production
2. development
3. none - does not add any default / built-in optimizations

module.exports = {
mode: "development"
}

Entry

module.exports = {
mode: "development",
entry: "./path/to/my/entry/file.js"
}

Output

module.exports = {
mode: "development",
entry: "./path/to/my/entry/file.js",
output: {
path: path.resolve(__dirname, "dist"),
filename: [name].js
}

}

“[name]” is webpack’s built in configs and sets the dynamic name that webpack creates. This is how the final bundled file will be main.js’

Loaders

Loaders are like tasks in other build tools and provide a powerful way to handle front-end build steps. It can transform files from a different language to JavaScript or load inline images as data URLs. It even allows you to directly import CSS files from your JavaScript modules.

module.exports = {
mode: "development",
entry: "./path/to/my/entry/file.js",
output: {
path: path.resolve(__dirname, "dist"),
filename: [name].js
},
module: {
rules: [
{ test: /\.css$/, use: ["style-loader", "css-loader"] }
]
}

}

module’ — property is used to denote the loaders and its configuration.

rules’ — property is a list of objects that contain the different types of loaders.
Each item (object) of the rules property contains testand use’.

test’ — property takes a regex and executes the specified loader for the file types that match.

‘use’ — property takes the loader type value that will be used for executing / transforming the specified file type(s).

In the above code snippet, the rules checks for the CSS file types and transforms it (to use in browser) using the css-loader and style-loader.
The css-loader interprets the ‘@import’ and ‘url()’ and resolves them.
The style-loader injects the CSS into the DOM. (takes the styles and creates a style tag in the HTML)

Plugins

const HtmlWebpackPlugin = require("html-webpack-plugin");module.exports = {
mode: "development",
entry: "./path/to/my/entry/file.js",
output: {
path: path.resolve(__dirname, "dist"),
filename: [name].js
},
module: {
rules: [
{ test: /\.css$/, use: ["style-loader", "css-loader"] }
]
},
plugins: [
new HtmlWebpackPlugin({
template: "./src/index.html"
})
]

}

‘plugins’ — property is a list of new instances of plugins. Each plugin instance takes arguments / options which you need to pass in the new instance.

In the above code snippet, plugins contain the HtmlWebpackPlugin instance which creates a new HTML file based on the template HTML file (./src/index.html) and puts it inside the output folder (./dist).

Difference between loaders and plugins

Plugins are executed after the end of the bundle generation process. Plugins can modify how bundles are created and have more control than loaders.

Why webpack

Using webpack loaders, we can use modern JavaScript syntax like arrow functions, spread operators, etc. which are then later transformed (during the bundle generation) into common JavaScript that are compatible with all the modern and old browsers.

In development mode, webpack also provides ‘Hot Module Replacement’ which updates the modules without fully reloading the entire page. This saves the development time by only updating what’s changed.

It is used to optimize and minimize the code, so that it loads and downloads the bundled files / chunks faster in the browser. All these process and transformations are executed in a single build process in a very short time.

There are many more features and advantages of webpack which I will cover in detail in the upcoming articles.

GitHub Repo Link

Next article

References

Software engineer