Introduction on React Webpack:

We have the facility to choose one from many templates while we use React Webpack. For eg: React Starter kit, React boilerplate, Create React App, and many more.  A lot of developers around the world adopt all these templates. These support application development on a very large scale. Nonetheless, the developers have bundled and experienced output. 

If we wish to maintain an even higher degree of control over our build process then we might go for the custom Webpack configurations as one of our alternatives. In this article, you will understand that this task is not much complicated. While troubleshooting other people’s configurations a more precise idea will be there. 

It is easy to assume that you have heard about React Webpack if you have been playing around with the basics of React. Maybe you are here because you have heard about it and want to know about React Webpack in more detail for real applications in your React apps. 

 

Beginner with React Webpack:

In today’s time, the way we write our JavaScript code is way different from that of the code that the browser executes. Developers frequently rely on various other kinds of resources such as transpired languages. They also rely on new experimental features as well which today’s modern browsers don’t support as well. Webpack is basically a bundle of modules that JavaScript uses. These modules actually bridge this gap and produce a code that is cross-browser compatible. 

 

Base Configuration:

Since version 4 of Legato, Webpack does not find the need for any configuration to run. If we choose a build mode then that will apply a set of defaults that are more suitable for the target environment. 

First of all, we need to install webpack and webpack-cli:

npm install -D webpack webpack-cliA

After that we will need to populate webpack.config.js with a configuration that will feature the following options:

 

  • output.filename: It is one of the file name patterns which that generates the files.
  • Devtool: This enables the source-map generation in the development mode.
  • Output.path: This is a root directory that helps to store the output files.
  • Entry: We consider Entry as the main file of the React application.
  • Output.publicPath: It is the file to the root directory where the files will get deployed at the webserver. 

The above configuration is perfectly fine for plain JavaScript files. But in the case of Webpack with React some additional transformations are important. 

The Problem: 

There was a constant urge of the developers for the overall experience of the users to improve while they work with the app. Therefore, there was an influx of a lot of new frameworks and libraries in the React community. There were a few designs that were constantly used. At that time, websites were nothing other than small package that contained a number of files in them. After the announcement of JavaScript, the websites also got bulkier. Then the new trend of writing small encapsulated chunks of code came in the frame. This led to an increase in the size of the files than in the package. 

Besides the overall size of the application, the challenge also was in a huge gap. To solve these complicacies, a simple solution was found. The solution was none other than webpack, which is a static and modular bundler.

 

 

How Webpack Solves the Problem?

To be brief, what Webpack simply goes through your packages and it creates what is commonly known as a dependency graph. This graph consists of many different modules that our web application needs to function as we desire. After that, we can depend on the graph; it creates a whole new package that consists of the fields that are the very bare minimum. 

 

Installation:

First, we use npm int and for this purpose, we will be using VS Code. But you are free to use any code editor that you want. Before we start anything we should make sure that we have the latest nodeJS and latest npm version. We can install them locally on the machines we use.

 

$ npm init: This is going to create a starter package and also add the package.json file for our purpose. Here, all the dependencies required are specified. Now, to create a simple React application we need the main libraries that are React and ReactDOM. As a result, we must add them as dependencies in our application that uses npm. 

 

The next thing that we need to do is add the webpack so that we can get our application bundled together. We will also be requiring hot reloading that is possible with the use of webpack dev server. 

$ npm i webpack webpack-dev-server webpack-cli –save–dev

Moving on with our process, we are going to add some text next and get started with the webpack. 

 

React Coding:

We are aware that the initial point of the application is the index.js file that is in the src folder. So let us now start with that. Let us start by requiring both the React and React DOM for use in our case. We are going to simply import the file from our components folder which we are going to create and add another file in the folder that we called App.js. Next, we will see what is inside the App.js:

import React, { Component } from ‘react

class App extends Component {  render() {    return (     

       

Webpack + React setup

     

    )  }}

export default App;

Now we are nearly done and the only thing that we are left with is to enable the hot reloading. This means that each time any change is detected, the browser reloads the page automatically. And also it has the ability to build the entire application when it is needed. We need to add the script values in the file named package.json. We have to remove the values for test property in the script objects of our package.json file. 

Once everything is completed, we are set. Next what we can do is go to our terminal and then we navigate to the root folder and after that, we need to run the npm start. That should be starting a dev server on the computer and then serve the HTML file in the browser that we are using. For minor changes, the code is saved and the browser will automatically be refreshed so as to show the latest set of changes. Then once it is done you will need to just hit the npm build command. After that, the Webpack will create a bundle that is optimized in the project you are working on. We can deploy it on any web server of our choice. 

Conclusion:

We have just learned about the basics of React Webpack in this article but trust me when I say it, there are limitless applications of React Webpack. I hope this article was able to get you excited to explore the limitless options that React Webpack provides us with. You can also refer to their official website for acquiring more in-depth knowledge. That was all for now and we really hope that you enjoyed the article. We also hope this really helped you with what you wanted. Using the React Webpack you can solve many problems easily that would have required a lot of hassle. Avoiding all these hassles, you can focus more on adding more functionality to your app that will improve the experience of the users. React Webpack really helps in making the work of the developers much easier.

 

Leave a comment