Understanding Micro-Frontends Webpack5 configurations Step by Step
Rany ElHousieny, PhD???
Generative AI ENGINEERING MANAGER | ex-Microsoft | AI Solutions Architect | Generative AI & NLP Expert | Proven Leader in AI-Driven Innovation | Former Microsoft Research & Azure AI | Software Engineering Manager
In the previous two articles, I demonstrated how to build Micro-Frontends and deploy them to AWS. During the process, I just asked you to copy the content of webpack.config.js and webpack.prod.js without explanations. In this article, I will explain line by line how Webpack works.
Here are the previous two articles:
Full Video explanation for this article at
===============
This article is an explanation for step 5 at https://www.dhirubhai.net/pulse/micro-frontends-hands-on-example-using-react-webpack-rany. You have to do steps 1 - 4, if you want to follow along.
I explained this article in the following Youtube video
Step 5.1: Adding dependencies
You may follow the following short video for the next 3 steps
add webpack and webpack-cli
On visual studio code, right-click on mfe1 and open a terminal
from inside mfe1 directory run the following command
yarn add webpack webpack-cli
Step 5.2: Create webpack.config.js
Now, let's try to build and see what happens. Run the following command:
yarn webpack
You will get few errors. Let's take one be one.
The first error is asking about the mode. Webpack needs to know which mode to run with to be able to bundle the dependencies, accordingly. Let's use Development mode. In webpack.config.js add the following
module.exports = {
mode: 'development',
};
This will take care of the first error and tell Weboack to build in development mode. Now, build again and watch the folders on the left hand side. You will notice a destination folder named "dist" will be created.
This is the folder that will be generated by Webpack's build and bundle process and this is the folder we will deploy to the S3 Bucket. What happened here is that Webpack took all the code we have index.js, bootstrap.js, App.js ... and there dependencies and bundled them in main.js as you can see.
Now we do not see the mode error, but we still React and loader errors. Those errors because Webpack needs loaders to understand React. As you know Browser only understand CSS, HTML,, and JavaScript ES5 (for now). JSX and ES6+ will need a compiler. We use babel for that. I will show you how to add those loaders to the configuration but first let's create a local server to see our demonstrate our website (This will be S3 configured as a website at the end)
Step 5.3 - Local Server
To add a local server on a certain port (here, I used 8001), add the following lines to webpack.config.js
devServer: {
port: 8001,
},
Now, run the following command
yarn webpack serve
This will start a local web server on port 8001. However, if you navigate to https://localhost:8001, you will only find list of files. This is because we did not configure index.html, yet. We will do this in the coming step. However, try to browse main.js and you will be able to see its content as follows:
So far, Webpack created a local web server on Port 8001 as we configured it in Webpack.config.js. However, it is still missing a min component for the browser: index.html
Step 5.4 - HTML Webpack Plugin
We need to import html-webpack-plugin for Webpack to generate index.html and add the bundled js files to it.
const HtmlWebpackPlugin = require('html-webpack-plugin');
Then we add the plugin to the modile.exports object as plugins array of plugins, as follows:
As you notise here, we need to include a template index.html that Webpack will use to generate a new Index.html with the generated main.js
Now, let's build again using yarn webpack and notice the index.html file created under dist folder
Let's start the server again using yarn serve and browse to HTTP://localhost:8001
It is completely empty, right? Not really, it just does not compile React. Let's look into the source file by right click on the page and select inspect
Notice that it is the original file from React but added main.js to it
Let's modify public/index.html to see some changes.
- remove everything in the <head> and add only <title> as follows:
Now, when you browse and inspect, you will notice that Webpack, again, added the main.js automatically
Let's add some content to the index.html file
add <h1>Micro-Frontend 1<h1> at the beginning of the <body> as follows
When you refresh the page, the final page will look like the following:
Now, it is time to enable React :)
5.5 Enable React
To enable React, you need module rules in webpack.config.js
First, you ask babel to compile all files with js and jsx extensions
test: /\.js?$/,
Then add babel loader that will translate to ES5
// To Use babel Loader
loader:
'babel-loader',
options: {
presets: [
'@babel/preset-env' /* to transfer any advansed ES to ES5 */,
'@babel/preset-react',
], // to compile react to ES5
},
The first option preset-env to convert to ES5 and the second option preset-react to translate React
Here is the final file
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
mode: 'development',
// Adding Server
devServer: {
port: 8001,
},
plugins: [
new HtmlWebpackPlugin({
template:
'./public/index.html',
}),
],
module: {
rules: [
{
test: /\.js?$/,
loader:
'babel-loader',
options: {
presets: [
'@babel/preset-env',
'@babel/preset-react',
],
},
},
],
},
};
You need to restart yarn webpack serve again and refresh the page
This is how you configure Webpack for React. In the next article, I will explain Module Federation Plugin
Senior Executive at Motilal Oswal Financial Service Limited React js | Redux | Typescript | NextJs | NodeJs | express | HTML | CSS | Linux | Nginx
1 年I have some doubts. Can anyone help. From my understanding , If we want to override webpack configuration in cra without ejecting, available ways are react-app-rewired, CRACO and rewire. As CRA using webpack under the hood and we don't have access webpack configuaration. In this article we are not ejecting cra also not using react-app-rewired, CRACO and rewire. Directly installing webpack, webpack-cli packages and creating webpack.config.js in root directory. What is this method ? webpack.config.js is available only if we eject right ? Rany ElHousieny , PhD???
Freelance Senior Software Engineer | Google Developer Expert (Angular) | Speaker & Content Creator
2 年Thanks for sharing Rany! If we would like to remove/avoid webpack.config file and use craco, what should we consider?