Microfrontend: Role & Importance of Webpack Configuration

Microfrontends have emerged as a powerful architectural style that allows large teams to build and deploy features independently. This approach breaks down a monolithic frontend application into smaller, more manageable pieces that can be developed, tested, and deployed individually. This modular structure not only accelerates development cycles but also enhances scalability and maintainability. One of the key tools enabling this architecture is Webpack, a popular module bundler for JavaScript applications. The webpack.config.js file plays a crucial role in setting up a microfrontend application, as it defines how different modules are processed and combined. This article will guide you through the initial setup of a microfrontend application and highlight the importance of the webpack.config.js file in achieving an efficient and seamless integration of microfrontends.

Image taken from Google

In this article,

• you will learn how to setting up the project of microfrontend
• what is the important role of webpack and how can we use it?

Case Study

I want to implement the product app in microfrontend and later I will extend this app with other microfrontend app’s.

Initial Setup

1. You need to create a main folder ‘micro-apps’ and inside that create a sub-folder of our microfrontend app called ‘products’.

mkdir micro-apps
cd micro-apps
mkdir products
cd products

2. Inside the products folder, initialize with npm project with the below command. It will create a package.json file.

npm init -y

3. Install the node module dependencies,

npm install webpack@5.88.0 webpack-cli@4.10.0 webpack-dev-server@4.7.4 faker@5.1.0
 html-webpack-plugin@5.5.0 --save-exact

Folder Structure:

Folder structure of the project

Development Setup :

Open the project folder in VS code or any other editor you like.

1. Create new folder ‘src’ inside the ‘products’ directory.
2. Inside the ‘src’ folder, create index.js file.

Put the below code inside the index.js file.

import faker from 'faker';

let products = '';

for (let i=0; i<3; i++) {
    const name = faker.commerce.productName();
    products += `<div>${name}</div>`;
}

document.querySelector('#dev-products').innerHTML = products;

Create new file inside products directory called ‘webpack.config.json’.

module.exports = {
    mode: 'development',
};

Open the package.json file and replace the “scripts” with the below snippet.

"scripts": {
    "start": "webpack"
  },

Open the terminal and inside the products directory, run:

npm run start

When you run this command, Webpack processes your source files, bundles them according to your configuration, and serves them on a local server. Webpack reads the configuration file (usually named webpack.config.js) to determine how to process the source files. This configuration specifies entry points, output paths, loaders, plugins, and other settings. Webpack processes the specified entry points and their dependencies, bundling them into a single or multiple output files. By default, the main output file is usually named main.js.

If you open the main.js file, you can see it have lot of code snippets that refer to somehow to the node_modules packages. So the webpack process is illustrated in the below picture.

Webpack process illustration

Setting Up Dev Server:

Open the webpack.config.js file again and update it script as below:

module.exports = {
    mode: 'development',
    devServer : {
        port: 8081
    }
};

Also update the package.json file and replace the “scripts” with the below snippet.

"scripts": {
    "start": "webpack serve"
  },

Start the project by npm run start . Open the browser and go to localhost:8081/main.js. The dist directory with the main.js file is the output of the Webpack bundling process. It contains the bundled and optimized JavaScript code for your application, ready to be served to the browser. The development server provided by webpack serve allows you to develop your application with features like live reloading and hot module replacement as shown in the below diagram.

Webpack Dev Server

Now the next step is to consume the main.js snippet into HTML document and it will look like as illustrated in below image.

Webpack Dev Server with HTML document

It works in our case because webpack generated only one JS file called main.js. But the issue is, webpack generate the JS file with random names and sometime split the files in chunks like 1k4j43.bundle.js, sdfsdnfn.vendor.js etc etc … files. So the question here is, how to handle such situations? The problem is shown in below image.

Thanks to html-webpack-plugin which allow us to use the random generated JS file from webpack.

Open the webpack.config.js file and update the code as below:

const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
    mode: 'development',
    devServer : {
        port: 8081
    },
    plugins: [
        new HtmlWebpackPlugin({
            template : './public/index.html'
        })
    ]
};

Create a ‘public’ folder inside ‘products’ folder and create a index.html file inside it. Put the below content on it.

<!DOCTYPE html>
<html>
    <head>
    </head>
    <body>
        <div id="dev-products"></div>
    </body>
</html>

Now run the command on terminal npm run start and it will show you the product list on the browser.

Output on the browser

Conclusion

The webpack.config.js file ensures that each microfrontend is properly bundled, optimized, and integrated, allowing for independent development and seamless deployment. By understanding and utilizing Webpack's capabilities, developers can create flexible and scalable microfrontend applications that meet the demands of modern web development. Embracing this architecture not only improves efficiency but also empowers teams to innovate and deliver features more rapidly.