Introduction About React Webpack Production Build:

A React Webpack Production build is a static module bundler. So this merely means, once you build or method your application supported any framework or library with webpack support, the Webpack shows its magic and internally builds a dependency graph that maps each module your project desires and generates one or additional bundles.

Webpack treats any file as a dependency if at any time one file depends on another. And this allows Webpack to take non-code assets, such as web fonts or images, and also provide them as dependencies for your application. 

Whenever Webpack starts bundling your application, it starts from a list of modules defined on the command line or in its configuration file. So from these entry points, Webpack recursively builds a dependency graph which includes all the modules that the application needs. Once the dependency graph is ready then the Webpack sprinkles its magic dust and bundles all those modules into a number of smaller bundles- often, just one – to be loaded by the browser. 

 

Modes in webpack 

Webpack in React consists of a configuration file that can be edited by the programmer to make the application run as per the requirements. And the configuration file consists of five core concepts of webpack configuration. Among them, the mode is one of the five configurations of webpack and allows the developer to set its value to development, production, or none. By default, the mode is set to production. 

 

Now the question is, what exactly happened after changing the mode to development or production?

 

The answer is, webpack runs only on Node environments. So your system must have Node or NodeJS installed and the environment set accordingly. When using the development mode of webpack, the environment variable NODE_ENV used by node is set to development. The development environment runs locally on the developer’s machine. And this allows debugging and error checking of the application. 

process.env.NODE_ENV property is set to ‘development’

 

So setting the mode to production changes the Node settings to production. The application can be deployed to a server, for it to be useful. It sets the process.env.NODE_ENV property to ‘production’ and enables FlagDependencyUsagePlugin , FlagIncludedChunksPlugin , ModuleConcatenationPlugin , NoEmitOnErrorsPlugin , OccurrenceOrderPlugin , SideEffectsFlagPlugin and TerserPlugin as well. 

 

What is a production build? 

Production build aims to minimize the size of bundles and improves assets to enhance load time. It takes out CSS, images, and various sources you load with webpack. It has a compressed form of JS code that improves performance. The goal of the production build is very much different from the development build. In development, the developer’s main focus is on serving the file locally

(localhost server) with live reloading or HMR (hot module replacement). However, the goal of production build is to focus on creating miniature bundles, lightweight source maps and higher optimization of assets to improve load time. So we should write separate webpack configurations for each environment.

You need prior knowledge about webpack’s configuration file setup and its core concepts before proceeding further. 

 

Implementing the react webpack production build 

All developers follow one rule, that is DRY code, which stands for Don’t Repeat Yourself or don’t write the same code again and again. We will do the same in the production build or React application. We will separate the production and development of specific parts and still maintain a common file with shareable code. This will follow the DRY rule and the code’s readability will increase. 

Follow the below steps: 
  1. First of all, we need to install a tool called webpack-merge. It provides a merge function that joins arrays and merges objects creating a new object. If it encounters a function, it will execute it, run the result through the algorithm, and then wrap the returned values within a function again. This is needed by webpack for merging configuration objects. Install: npm install –save-dev webpack-merge
Import:const { merge } = require(‘webpack-merge’); 
Link: https://survivejs.com/webpack/developing/composing-configuration/ 

 

  1. Now start splitting the codes. This means that the code common to both production build as well as development build will be kept as a single file called webpack.common.js and the remaining codes for production and development specific build will be added in separate files.
webpack.common.js 

const path = require(‘path’); 

const { CleanWebpackPlugin } = require(‘clean-webpack-plugin’); const HtmlWebpackPlugin = require(‘html-webpack-plugin’); 

module.exports = { 

entry: { 

app: ‘./src/index.js’, 

}, 

plugins: 

new CleanWebpackPlugin(), 

new HtmlWebpackPlugin({ 

title: ‘Production’, 

}), 

], 

output: { 

filename: ‘[name].bundle.js’, 

path: path.resolve(__dirname, ‘dist’),

}, 

}; 

This file consists of an entry point to specify the webpack to start its bundling from the file or path to the file, mentioned in its entry property. The plugin property to add plugins in our webpack for bundle optimization, asset management and injection of environment variables and the output property for creating the dependency graph and specifying where the webpack should emit the bundles. 

 

  1. Now we will separate our development code from the production code. As we discussed earlier, it is a good practice to write DRY codes.
webpack.dev.js 

const { merge } = require(‘webpack-merge’); 

const common = require(‘./webpack.common.js’); 

module.exports = merge(common, { 

mode: ‘development’, 

devtool: ‘inline-source-map’, 

devServer: { 

contentBase: ‘./dist’, 

}, 

}); 

Webpack-merge module and the webpack.common.js are required or imported in this file for merging this file with webpack.common.js. It merges the object from webpack.common.js with this file’s object, creating a new object. 

 

  1. It is time to separate the production code as well.
webpack.prod.js 

const { merge } = require(‘webpack-merge’); 

const common = require(‘./webpack.common.js’); 

module.exports = merge(common, { 

 mode: ‘production’, 

 } 

); 

Webpack-merge module and the webpack.common.js are required in this file also. So for merging webpack.prod.js file with webpack.common.js. And it merges the object from webpack.common.js with this file’s object, creating a new object. 

 

  1. So finally, make changes to NPM scripts. And within the package.json file of the application, change the scripts property.
package.json 

{ 

“name”: “development”,

“version”: “1.0.0”, 

“description”: “”, 

“main”: “src/index.js”, 

scripts”: { 

“start”: “webpack-dev-server –open –config webpack.dev.js”, “build”: “webpack –config webpack.prod.js” 

}, 

“keywords”: [], 

“author”: “”, 

“license”: “ISC”, 

“devDependencies”: { 

} 

} 

Run the application to see visible changes. 

Conclusion 

Many libraries depend on process.env.NODE_ENV variable to determine what should be included in the library. So when it is set production, the libraries may drop large portions of code to optimize the application and check how the code will run for the actual users or clients. Using the production build, the webpack minifies the codes with the help of TerserPlugin.

 

Leave a comment