What is Webpack? Explained with examples.

Before webpack lets see what is the Module Bundling is and what it does

» What is Module Bundling?

Module bundling is the process of taking various pieces of code (modules) that are part of a web application and combining them into one or more bundles that can be loaded by a browser. This process involves several key steps and concepts:

Concepts and Steps in Module Bundling:

Modules

- In modern JavaScript development, code is often organized into modules. A module is a self-contained piece of code that exports specific functionality and can import other modules.

- Examples include ES6 modules (`import`/`export`), CommonJS modules (`require`/`module.exports`), and AMD modules.

Entry Point

- The entry point is the starting point for the bundler to understand the application. It's usually a main JavaScript file (e.g., `index.js`) where the application logic begins.

- Webpack starts its process from this entry point and looks for all dependencies.

Dependency Graph

- As Webpack processes the entry point, it recursively builds a dependency graph. This graph maps out all the modules and their dependencies.

- For instance, if `index.js` imports `moduleA.js`, and `moduleA.js` imports `moduleB.js`, the graph will reflect these relationships.

Transformation

- During the bundling process, Webpack can apply various transformations to the modules. These transformations are handled by loaders.

- For example, loaders can transpile modern JavaScript (ES6+) to older versions for browser compatibility, convert TypeScript to JavaScript, process and bundle CSS files, or optimize images.

Bundling

- Once all modules and their dependencies are processed, Webpack bundles them into one or more output files. These files are often called "bundles."

- The main goal is to reduce the number of HTTP requests required to load a web page and to optimize the loading time by combining related pieces of code.

Code Splitting

- Code splitting is a feature that allows you to split your code into smaller chunks. These chunks can be loaded on demand rather than loading everything upfront.

- This improves performance by only loading the necessary code for the current page or functionality.

Output

- The final output is one or more bundled files. These files are optimized and ready to be served to the browser.

- Webpack can generate source maps along with the bundled files to aid in debugging.

Example of Module Bundling in Practice:

Consider a simple application with the following files:

// `src/greet.js`:

  export function greet(name) {
    return `Hello, ${name}!`;
  }
  

  // `src/styles.css`:
  
  body {
    background-color: lightblue;
  }

// src/index.js

  import { greet } from './greet.js';
  import './styles.css';

  console.log(greet('World'));
  

With a Webpack configuration like this:

// webpack.config.js
const path = require('path');

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader']
      }
    ]
  }
};

What Happens During Bundling:

Entry Point:Webpack starts with `src/index.js`.

Dependency Graph: It sees that `index.js` imports `greet.js` and `styles.css`. and it follows these imports to include the code from `greet.js` and the CSS from `styles.css`.

Transformation: The CSS file is processed by the `css-loader` and `style-loader` to be included in the JavaScript bundle.

Bundling: Webpack bundles `index.js`, `greet.js`, and the CSS content into a single file `bundle.js`.

Output: The final `bundle.js` is placed in the `dist` directory, ready to be served by a web server.

Benefits of Module Bundling:

- Improved Performance: By reducing the number of HTTP requests and optimizing the code.

- Maintainability: Easier to manage and develop code using modular architecture.

- Compatibility: Ensures code runs consistently across different environments and browsers.

- Optimization: Allows for advanced optimizations like tree shaking and minification to reduce the size of the final bundle.

In summary, module bundling with tools like Webpack is essential for modern web development, helping to manage, optimize, and deploy complex applications efficiently.

» What is Webpack?

Webpack is a powerful open-source JavaScript module bundler. It is primarily used for bundling JavaScript files for use in a browser, but it can also transform, bundle, or package just about any resource or asset, including HTML, CSS, and images.

Key Features and Functionality of Webpack:

1. Module Bundling: Webpack takes modules with dependencies and generates static assets representing those modules. A module can be a single file or a collection of files.

2. Dependency Graph: - Webpack creates a dependency graph by analyzing the dependencies between modules. This graph helps Webpack understand which modules depend on each other.

3. Entry Points: - An entry point indicates which module Webpack should use to begin building its internal dependency graph. The entry point can be a single file or multiple files.

4. Output: - Webpack bundles the code and emits it to a specified output location. The output can be a single file or multiple files depending on the configuration.

5. Loaders: - Loaders allow Webpack to process different types of files (e.g., CSS, HTML, images) and convert them into valid modules that can be included in the dependency graph. - Examples include `babel-loader` for transpiling JavaScript, `css-loader` for processing CSS, and `file-loader` for handling image files.

6. Plugins: - Plugins are used to perform a wider range of tasks like optimization, managing assets, injecting environment variables, and more. Plugins are more powerful than loaders and can directly modify the output bundle. - Examples include `HtmlWebpackPlugin` for generating HTML files, `MiniCssExtractPlugin` for extracting CSS into separate files, and `TerserPlugin` for minifying JavaScript.

7. Code Splitting: - Code splitting allows you to split your code into various bundles that can be loaded on demand. This can significantly improve the performance of your application by reducing the amount of code that needs to be loaded initially.

8. Hot Module Replacement (HMR): - HMR allows modules to be updated in the browser at runtime without needing a full page reload. This is particularly useful during development for faster feedback and preserving application state.

9. Tree Shaking: - Tree shaking is a form of dead code elimination. Webpack can analyze and remove code that is not actually used, which reduces the bundle size.

10. Configuration: - Webpack is highly configurable. You can specify its behavior using a configuration file (`webpack.config.js`). This configuration file allows you to define entry points, output locations, module rules, plugins, and other options.

Basic Example of Webpack Configuration:

// webpack.config.js
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader']
      },
      {
        test: /\.(png|svg|jpg|gif)$/,
        use: ['file-loader']
      }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './src/index.html'
    })
  ],
  devServer: {
    contentBase: './dist',
    hot: true
  }
};

In this example:

Entry The entry point is `./src/index.js`.

Output The output file will be `bundle.js` in the `dist` directory.

Loaders CSS files will be processed using `style-loader` and `css-loader`. Image files will be processed using `file-loader`.

Plugins `HtmlWebpackPlugin` will generate an HTML file based on `./src/index.html`.

DevServer The development server will serve content from the `dist` directory and enable Hot Module Replacement (HMR).

Overall, Webpack is a versatile and highly customizable tool that helps developers manage and optimize the assets and dependencies of their web applications.

» What is ModuleFederationPlugin?

ModuleFederationPlugin is a feature in Webpack that allows JavaScript applications to dynamically load code from other applications at runtime. This feature enables efficient code sharing and dependency management, and is especially useful for micro-frontends and plugin systems

The dependencies referenced in the shared configuration of the ModuleFederationPlugin are declared in the package.json file of the project. The package.json file is used to manage the project's dependencies, scripts, and various metadata.

Let's see the purpose and benefits of the shared configuration in ModuleFederationPlugin when using micro-frontends.

Micro-Frontends and Shared Dependencies

In a micro-frontend architecture, different parts of a web application (micro-frontends) are developed, deployed, and run independently. Each micro-frontend may have its own package.json file where its dependencies are declared. However, sharing dependencies via ModuleFederationPlugin offers significant advantages:

Avoiding Duplication:

If each micro-frontend included its own instance of common dependencies (like React or Material-UI), it would lead to multiple versions of these libraries being loaded in the browser. This duplication increases the overall bundle size and can cause performance issues. Ensuring Consistency:

By sharing dependencies, you ensure that all micro-frontends use the same version of shared libraries. This prevents issues that could arise from version mismatches, such as breaking changes or inconsistent behavior.

Optimized Loading:

When dependencies are shared, they are loaded once and reused by all micro-frontends. This reduces the load time and memory usage, improving the performance and user experience of your application.

How Shared Dependencies Work in Module Federation: When you configure shared dependencies in ModuleFederationPlugin, Webpack handles the management of these dependencies across different micro-frontends:

Single Instance:

The singleton: true setting ensures that only one instance of the dependency is loaded. If multiple micro-frontends attempt to use the same dependency, Webpack will provide the already loaded instance to all of them.

Version Control:

The requiredVersion setting ensures that the specified version of the dependency is used. If a micro-frontend requests a version that matches the shared version, it will use the shared instance. If a different version is required, Webpack will handle this gracefully, potentially loading a different instance if necessary, but still trying to optimize.

Below is the webpack.config.js with ModuleFederationPlugin

/**
 * These lines import the necessary plugins and modules. HtmlWebpackPlugin, MiniCssExtractPlugin, and ModuleFederationPlugin
 * are required for their respective functionalities. path is a Node.js module for handling file paths, and dependencies are
 * extracted from package.json to manage shared dependencies.
 */

const HtmlWebpackPlugin = require("html-webpack-plugin");
const path = require("path");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");

const ModuleFederationPlugin = require("webpack/lib/container/ModuleFederationPlugin");
const dependencies = require("./package.json").dependencies;

module.exports = {
  entry: "./src/index.js", // entry specifies the entry point of the application.
  mode: "development", // mode is set to "development" for non-minified, readable output and better development tools support.

  // output defines where to save the bundled files. The path is set to the dist directory, and the output filename is main.js.
  output: {
    path: path.resolve(__dirname, "dist"),
    filename: "main.js",
  },

  // devServer configures the development server. It runs on port 3004, enables live reloading, and supports
  // HTML5 History API-based routing with historyApiFallback.
  devServer: {
    port: 3004,
    liveReload: true,
    historyApiFallback: true,
  },

  // module.rules defines how different types of files should be processed. The first rule uses babel-loader to transpile
  // JavaScript and JSX files, excluding the node_modules directory. The second rule processes SCSS files,
  // using MiniCssExtractPlugin.loader to extract CSS, followed by css-loader and sass-loader to handle SCSS.
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader",
        },
      },
      {
        test: /\.scss$/,
        use: [MiniCssExtractPlugin.loader, "css-loader", "sass-loader"],
      },
    ],
  },
  name: "shell", //name assigns a name to build, which can useful in multi-configuration setups or when using Module Federation.

  //Plugins
  plugins: [
    // HtmlWebpackPlugin: Generates an index.html file based on the specified template (./public/index.html) and includes the output bundles.
    new HtmlWebpackPlugin({
      template: "./public/index.html",
      filename: "index.html",
    }),

    // Extracts CSS into separate files. By default, it will name the output file main.css.
    new MiniCssExtractPlugin(),

    // ModuleFederationPlugin: enables loading separately compiled applications at runtime and allows sharing of common dependencies
    new ModuleFederationPlugin({
      name: "shell", //The name of the current build (shell).
      filename: "remoteEntry.js", //The name of the file where the remote entry will be exposed (remoteEntry.js).

      // remotes: Defines the remote modules with their URLs.
      remotes: {
        LeftNav: "leftNavigation@http://localhost:3001/remoteEntry.js",
        TopNav: "topNavigation@http://localhost:3002/remoteEntry.js",
        ItemDetails: "itemDetails@http://localhost:3003/remoteEntry.js",
      },

      // Specifies modules to expose to other builds (empty in this case).
      exposes: {},

      // Manages shared dependencies to avoid duplication and ensure singleton instances of specified libraries.
      shared: {
        // singleton: Setting this to true ensures that only one instance of React is used across all federated modules.
        // This is crucial for maintaining a single React context and avoiding issues with multiple React versions running simultaneously.
        // requiredVersion: This specifies the required version of React. It uses the version defined in the project's package.json (dependencies.react).
        // This ensures compatibility and that the correct version of React is used.
        react: {
          singleton: true,
          requiredVersion: dependencies.react,
        },

        // singleton: Similar to React, setting this to true ensures that only one instance of React DOM is used.
        // This is important for consistency and to avoid potential issues with rendering and DOM manipulation.
        // requiredVersion: This specifies the required version of React DOM, taken from package.json (dependencies["react-dom"]).
        // Ensures that the correct version is used across all modules.
        "react-dom": {
          singleton: true,
          requiredVersion: dependencies["react-dom"],
        },

        // singleton: Ensures that only one instance of Material-UI components is used across the application.
        // This avoids conflicts and ensures a consistent look and feel.
        // requiredVersion: Specifies the required version of Material-UI, as defined in package.json (dependencies["@mui/material"]).
        // Ensures compatibility and correct functionality.
        "@mui/material": {
          singleton: true,
          requiredVersion: dependencies["@mui/material"],
        },

        // singleton: Ensures a single instance of Material-UI icons is used, preventing duplication and potential conflicts.
        // requiredVersion: Specifies the required version of Material-UI icons, taken from package.json
        // (dependencies["@mui/icons-material"]). Ensures the correct version is used.
        "@mui/icons-material": {
          singleton: true,
          requiredVersion: dependencies["@mui/icons-material"],
        },
      },
    }),
  ],
};