Updated February 20, 2023
Introduction to Webpack ReactJS
Webpack ReactJS is a module bundling system on top of NodeJS and is a bundler for modernized JavaScript applications. The main purpose of Webpack ReactJS is to bundle JS files for use in browsers. Webpack in ReactJS when processes application, internally, a dependency graph is built from one or more than one entry point that combines each module that are the static assets to serve from.
What is Webpack ReactJS?
As we write code, there is a visible gap between JavaScript code and the code browsers execute and understand. Hence, to comprehend the gap, developers depend on various resources and other features that are not supported in modern browsers, here, most JavaScript bundlers are used to fill this gap. And the best module bundler in the React Webpack, is used for cross browsing and retaining complete control for developers and is open to customization.
There are other alternatives like Browserify, Brunch, and Parcel, But, Webpack is the widely accepted and used module that has proved its merits across the global ReactJS development community.
Some of the advantages of using Webpack ReactJS are:
- Enhances the stability of React Application.
- Optimizes development time with a feature called “Hot Module Replacement”.
- Has absolute control of React Build System.
How to Use Webpack ReactJS?
Before starting to use Webpack in ReactJS, one should make sure to have the latest versions of NodeJS and npm globally installed.
Similar to the creation of React app, Webpack React is a command line tool that is used to create a bundle of assets i.e., code and files. This does not run on the Server or the Browser. Webpack takes in all JavaScript files and the other assets while transforming them into a single large file, and hence this file can be sent to the server or the browser, depending on the rendering style set up for the website.
Typically, Webpack ReactJS is configured with a file labeled as webpack.config.js as here all the required configurations are written.
How to Create Webpack in ReactJS?
Given below shows how to create a webpack in ReactJS:
Step 1: Install NodeJS, VSCode (any editor that supports Webpack file, most probably supports Scripting code).
Step 2: Open Command Prompt, and create a directory or a folder with the below command.
Command:
mkdir <directory/ file name> will create a directory inside C: Drive as shown
cd <directory/ file name> will open the file, required to perform further operations.Output:
Step 3: Then, need to initialize npm with the below command.
Code:
npm init -yOutput:
It will generate a package.json file with the above script. We can open the folder manually and check if package.json is created or not.
Step 4: Now dependencies need to be added with the below command. Adding dependencies to the code depends upon user requirements or functionality requirements.
Command to install dependencies:
npm i <dependency_name>Output:
Similarly, add a few more dependencies.
So now let us go check the package.json for the dependencies, here the screenshot shows Visual Studio Code Editor. All the installed dependencies and related dependencies are scripted as below.
Step 5: Now we need to setup the Babel RC file for Babel configuration as shown below. Click on Add File and name it as .babelrc and enter the script in it.
This means telling Babel to use the plugins or the dependencies that are installed. At a later phase, when the user calls babel-loader from Webpack React, the program will know where to look for dependencies.
Step 6: Now create the webpack.config.js file and write the below shown script.
Port numbers can vary based on availability. It is the basic shell script for webpack. Here in line number 7, “mode” defines the webpack configuration to be under “development” or “production”. Development mode is optimized for developer experience and speed whereas production mode gives defaults that are useful in deploying the application.
Step 7: To get this webpack running, we need to provide an entry point, which is where the React applications bundling process starts from.
There are various versions of Webpack, in Webpack 4, if an entry point is not included, it will consider the entry point to be located at ./src directory.
Output and filename can also be listed as it tells webpack where to write the compiled files and the filename will be replaced with a hash generated by webpack every now and then application changes and gets recompiled.
Also, devtool creates source maps that help in debugging the application. Even though there is various type of source maps, inline-source-map has to be used only for development mode.
Step 8: Also, the module is the type of module application that includes such as Babel and the CSS module. And the rules are applicable to how the user handles each module.
Step 9: We have two rules, first rule is to test files with .js extension using Babel via babel loader that helps to look for JavaScript files.
Step 10: And the next rule is to test the CSS files with .css extension. Two loaders can be used, css-loader and the style-loader to handle css files. The user instructs css loader to use the CSS module, with camel casing, and create source maps.
Step 11: We also use html webpack plugin that accepts objects with different options. Here let’s specify the HTML plugin that is being used and the other dependencies for the bundler analyzer.
Step 12: And then configure the development server by specifying localhost and the port. If want to launch the application automatically, need to set historyApiFallback as true and open as true.
Below is the complete script on the screenshot from Step 7, this is how the webpack file in ReactJS is created.
Webpack.config.js file script sample:
Example of Webpack ReactJS
We have configured the Webpack in the above context, now we shall create a Webpack React Example for practical experience. If any modifications are required for webpack.config.js based on the example can be done.
Step 1: Create a source folder under the project directory, and also create a few files as shown below under the source folder.
Step 2: In App.js file, let’s have some script.
Step 3: Add a few css related codes.
Step 4: Write code for index.html as below. In line number 12, the script is pointing to the bundle.js file.
Step 5: Write code for index.js file which renders App.js file.
Step 6: Need to create start and build scripts as below.
Step 7: Now run the application and make modifications if required. Make required modifications to webpack.config.js accordingly.
Command to run the app:
npm run startOutput:
Step 8: To build the application, use the command npm run build.
Step 9: You can check the code running on the localhost with port 3030 as given. http://localhost:3030/ this being the output and a live example of webpack configuration for the ReactJS application to run with the dependencies.
Conclusion
With this, we conclude the topic “Webpack ReactJS”. We have seen what is webpack and how is it used and configured or created in ReactJS. We have also seen step by step procedure of how to create a webpack file and configure it according to the user’s needs. Also have illustrated a simple example of a ReactJS application that has been configured with webpack.config.js file for dependencies, entry, and output path files, etc.
Recommended Articles
This is a guide to Webpack ReactJS. Here we discuss the introduction, and how to create webpack in ReactJS and examples respectively. You may also have a look at the following articles to learn more –
