Bundling NodeJs Application using Webpack

Hi guys, in this article we are going to know about Bundling NodeJs Application using Webpack. During our Production build, we require the file sizes to be as tiny as likely to improve app loading and usage speed. We also require there to be as few files as possible to decrease the number of request calls of the server and also we want to minify and uglify our written source code, with comments and blank space removed. We also require to encode static images directly into our HTML files.

To bypass unwanted imports and to keep Development and Production thoughts separate, we will have a separate Express server file for Development and Production, and separate Webpack config files for Development and Production our node application code, and for the server also.

Step 1: Install nodejs in your system / Make workspace directory

Let’s begin from scratch with a new folder and run the following command to make a new folder and package.json file.

Step 2: Install required packages using NPM 

Here we need to install required dependency packages using the following commands. This package installs as a DEV dependency.

Step 3: Create the required folders

Now we need to create “src” folder inside of our application because of the Webpack default entry point as “src” folder. Create index.html and main.js file once the source folder had been created in our working directory.

Step 4: Basic Bundling process

Run the following command to generate a bundling file from our source code. This command will commple our source code and create bundle files into the dist folder.

Step 5: Adding Script / Command

Add build command on script section in package.json file and it helps us to use lang command with a single keyword.

Step 6: Webpack bundle mode 

Bundling mode help us to define what kind of file comprestion is reuired to production and development process. We can add this property using mode parameter in webpack command.

Step 7: Webpack Config file setup

Webpack is a zero-configuration setup process but we can config some basic and relevant details for the bundling process. Using this file we can define entry point, destination path, bundle file name, module, and rule for bundling process. It also helps us to define multiple configurations files for a different mode of bundling like dev or prod.

  •      entry -> Entry point for Webpack src file
  •      output -> It helps us to configure output files
  •      mode -> Bundling mode like dev or production
Step 8: Bundling & Copy HTML file to the dist folder

Here we need to move the HTML file to the dist folder for the production build test. Basic Webpack command will process the entry JS file and move the bundled JS file to the dist folder. To do this operation we need the following package and install as a dev dependency.

Once the package has been installed in our working directory we need to add the rule and plugins for the HTML files process.

Step 9: Bundling & Copy JS file to dist folder using babel-loader

Here we need to add the rule for JS files compression and it uses bable-loader for syntax check and file minimization. Here we exclude node_modules director for JS file compression. For this, we need the following packages and install as a dev dependency

Once the package has been installed in our working directory we need to add the rule for the JS files process.

Step 10: webpack-dev-server configuration 

Webpack dev server helps a lot while development time. It will compile source code and keep it as in temporary cache path. It won’t create any dist folder on the working directory instead of this it will produce a URL path to access the laster compiled code. Using this dev server we can check our code modification as instantly into the browser. The following package is required for dev server configuration and installs as a dev dependency.

Add script in package.json file,

Step 11: Bundling & Copy Image file to dist folder

Most of the time we include some static files into our HTML pages like images. While normal Webpack compile process it won’t move to the dist directory. For this, we need to include the following packages and install them as a dev dependency in the working directory. This package will generate new images with a hashed file name and move to the dist folder and update the HTML file with relevant file names automatically.

Once the package has been installed in our working directory we need to add the rule for the Static files process.

Step 12: Bundling & Copy SCSS file to dist folder

In major applications have style details for there components. For this, we use Style files and corresponding details writing inside of it. While loading the HTML file corresponding style components also loaded with it. For adding style component into our dist folder we need the following packages and install as a dev dependency.

After the packages have been installed we need to add the rule for the Style files process. 

The above code helps us to compile the SCSS file to the CSS file and minifying the CSS file to the uglify file. After it includes the style input as a normal JS script into the HTML file. It won’t create any separate CSS file for application style. 

Step 13: Include compiled SCSS as CSS file into index HTML file

For adding separate style files and include into HTML we need the following package for CSS extract. We need to install the following package as a dev dependency.

After package gets installed we need to include a plugin code in the Webpack config file and also we need to include extract loader in the SCSS rule loader list.

Step 14: Cleaning old file in the dist folder

Most of the time we run the bundling process for code changes and any file content changes for production deployment. At that time we need to clear the old build folder or director for fresh code. It mandatory for old content replaces with new content. To avoiding cache and extra file process we want to do the above operations. For this, the following package helps us to clear the old dist folder and create a new file component for the new build process. We need to install the following package as a dev dependency.

After completion of the above process, we need to include a new plugin with Webpack config plugin array. It always runs clear command before the new bundling process.

Here the complete webpack config file details.

That’s all we already have done all required component rules and plugins for HTML, JS, Static Files, SCSS, and Cleanup process. Now we are ready to do a build process for all kinds of environment deployment. 

Download  Git Repository

Learn Infinity

Learn Infinity is the most famous Programming & Web Development blog. Our principal is to provide the best online tutorial on web development. We execute the best tutorials for web experts this will help developers, programmers, freelancers and proving free resource you can download or preview the tutorials.

Leave a Reply

Your email address will not be published. Required fields are marked *

Back to top