Building Micro-Frontend Ecosystem with Webpack

Micro-Frontend Development using Webpack

Micro-frontend development is a growing trend in web application architecture. It allows different teams to develop and deploy independent components that work together as a single-page app. In this blog post, we will explore how to build a micro-frontend ecosystem using Webpack.

Understanding the Micro-Frontend Ecosystem

In a micro-frontend ecosystem, each component is built and deployed independently. These components are referenced in a single HTML page and resolved at runtime. Let’s take an example of a production setup:

<script src="http://deploy-server/external/vendor1.js"></script>
<script src="http://deploy-server/external/vendor2.js"></script>
<script src="http://deploy-server/external/vendor3.js"></script>
<script src="http://deploy-server/internal/comp1.js"></script>
<script src="http://deploy-server/internal/comp2.js"></script>
<script src="http://deploy-server/internal/comp3.js"></script>

In the above example, we have external vendor files (vendor1.js, vendor2.js, vendor3.js) and internal component files (comp1.js, comp2.js, comp3.js). The components may use or depend on the vendor files for their functionality.

Bundling External Vendors and Internal Libraries

To bundle the external vendor files and internal libraries separately, we can use Webpack. The idea is to create a shared bundle for the vendors and reference it from the component bundles. Let’s take a look at an example Webpack configuration:

entry: {
  home: { 
    import: './src/app1-index.js',
    dependOn: 'shared',
    filename: 'js/app1.js',
  },
  shared: ['react', 'react-dom', 'react-router']
},
output: {
  publicPath: '/',
  path: path.join(__dirname, '/build/'),
  filename: `js/[name].js`,
}

In the above configuration, the shared entry represents the vendors (React, ReactDOM, React Router) used by all internal component scripts. The home entry represents the app-specific component.

With this configuration, Webpack will create two files: js/app1.js and js/shared.js. The shared.js file contains the bundled vendors.

Using Shared Vendors in Different Teams

Now that we have bundled the vendors in vendor.js, we can distribute it to different teams for development. Each team can include the shared vendors in their HTML page:

<script src="/build/js/vendor.js"></script>
<script src="/build/js/app1.js"></script>

Teams can then develop their components and reference the shared vendors in their code. For example, if app2.js depends on vendor.js, the following HTML can be used:

<script src="/build/js/vendor.js"></script>
<script src="/build/js/app2.js"></script>

However, make sure to configure Webpack correctly. In the app2 configuration, use the externals property to avoid bundling the shared vendors:

entry: './src/app2-index.js',
externals: {
  react: 'React',
  'react-dom': 'ReactDOM',
  'react-router': 'ReactRouter'
},
output: {
  publicPath: '/',
  path: path.join(__dirname, '/build/'),
  filename: `js/app2.js`,
}

With this configuration, the shared vendors will be resolved at runtime, and each team can assume their dependencies will be available for their component bundles.

Conclusion

With Webpack, it is possible to build a micro-frontend ecosystem where different teams can develop and share components while leveraging shared vendors. By bundling the vendors separately, each team can develop their components independently and resolve dependencies at runtime. This approach enhances modularity and promotes collaboration among teams in a micro-frontend architecture.

I hope this blog post has provided a comprehensive overview of micro-frontend development using Webpack. Start building your micro-frontend ecosystem today and enjoy the benefits of scalable and modular web application architecture.

reference : 

reactjs