Introduction to Webpack 5

#webpack #javascript #react #angular

What is webpack

Webpack is a static module bundler for modern JavaScript applications. When webpack processes the application, it internally builds a dependency graph which maps every module (like node_modules, images, CSS, etc.) your project needs and generates one or more bundles.

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:

Entry
Output
Loaders
Plugins
Mode

Mode

This parameter enables webpack to identify and add built-in optimizations for the corresponding environment. The default value for the mode parameter is ‘production’.

There are three modes:

production
development
none - does not add any default / built-in optimizations

module.exports = {
  mode: 'development'
}

Entry

An entry is a starting / initial point for webpack to start building out its internal dependency graph. Based on this webpack will figure out other modules, libraries and assets that the entry point depends on.

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

Output

The output property tells webpack where to save the bundles it creates and how to name the bundled files. This property only applies to JavaScript files not on other files like HTML, CSS etc.

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

Loaders

Loaders are used to preprocess the files as you import or load them and allows you to bundle any other static resources (like .png, .img, .css, .sass, etc.).

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 ‘test’ and ‘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

Plugins provide a powerful way to tap / injects custom build into webpack’s compilation process. A plugin is able to hook into key events that are fired throughout each compilation.
Plugins are the backbone of the webpack. Webpack itself is built on the same plugin system that you use in your webpack configuration.

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

Loaders do pre-processing transformation of any file types that we specify. Loaders work at the individual level during or before the bundle is generated. Loaders are not able to influence the actual build process.

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

First and most important reason for using webpack is that it gives complete control over the frontend build process and helps to build boiler plates or ready-made app for developers to start coding using the major frameworks like React, Angular and Vue.

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.