Comment build files using webpack

Photo by Garmin B on Unsplash

Once upon a time in a kingdom far, far away, a group of developers worked on a big project. The project lasted a couple of months. When the developers integrated all the building blocks for that project and tested the product they have made, they found some places in the code to improve and fix. After doing so, they were not so sure, if they were testing the newest version or not. They scheduled an urgent meeting and think about different ways to know the exact version and other metadata on the different environments.
One of the suggestions was to use comments inside the build files using webpack.
This is where our story begins…

Init Project, install, and configure webpack

Run yarn init command to create the package.json. Install webpack & webpack-cli as a development dependency,
Run yarn add -D webpack@5.70.0 webpack-cli@4.9.1. Create src folder and index.js inside of that folder. The structure should look like this:

root
|-- node_modules
|-- src
  - index.js
|-- package.json
|-- yarn.lock

Create webpack.config.js in the root folder and paste the content below.

After doing so, let's create our project files, which we will compile. I’m assuming that you are going to use your existing files, in case not, let's create two different files.
calc.js

export function addNumbers(firstNum, secondNum) {
  return firstNum + secondNum
}

greet.js

export function greeting(name = 'Guest') {
  return `Hello ${name}`
}

In the file index.js , paste the content below

The project structure should look like this:

root
|-- node_modules
|-- src
  - calc.js
  - greet.js
  - index.js
|-- package.json
|-- webpack.config.js
|-- yarn.lock

One last step before we can enjoy our bundle, we have to create a dedicated script to run our webpack config. Go to package.json file and add a new script:

"build:test": "yarn webpack --config ./webpack.config.js"

The fun begins, run yarn build:test , if everything went well, we are expecting to see our bundle.js file inside build folder. Let’s test it by running node ./build/bundle.js , the output should be:

This is a demo log to show everything is working.
module 1: adding two numbers: 1+3=4.
module 2: saying hello: Hello Guest

Generate comments into our bundle file

We are going to use the plugin named BannerPlugin and it is one of many webpack’s built-in plugins.BannerPlugin adds a banner (comment) to the top of each generated chunk.
Let’s add it to our webpack.config.js file

We have added some changes to our webpack.config.js file.
plugins array — used to customize the webpack build process, inside that array, we are going to push our new banner plugin.
new webpack.BannerPlugin a new instance, can get an object of options as an argument or just the content of the banner itself.
The banner configuration can get two different types, function or string, both should return a string. In the example above, the object option argument has been used with string type for the banner configuration.
I have decided to show package information as my comment for the bundle.js file, let's build and find out the output.
Run yarn build:testand after a successful running, check the bundle.js file. A new comment was added with the banner plugin content.

So far so good, we set our banner content for development mode, but what happens when we are trying to run webpack with built-in optimization on mode=’production’ ?

Note: production mode on webpack is doing some optimizing during the compile process, and adding a LICENSE file to the build folder.

Let's check it out. Go to webpack.config.js file and change the mode property from development to production , it should look like that:

Run yarn build:test . Two files were created inside the build folder

When opening bundle.js , at the beginning of the file, a new annotation was created referring to the LICENSE file. The LICENSE text file is including the banner content.

What is going on here?

After changing the mode from development to production , webpack did built-in optimization by the terser plugin. Moreover, as described earlier, in production mode webpack is creating a LICENSE file alongside the created bundle file. Our goal is to show comments inside the different chunks or into our bundle and not extract them into a different file.
TerserPlugin to the rescue.

We are going to use TerserPlugin to remove the LICENSE file that was created and keep the comments on the bundle.js file.
Install the terser plugin by running
yarn add -D terser-webpack-plugin , import the package on webpack.config.js file by calling
const TerserPlugin = require(‘terser-webpack-plugin’) and add a new property named optimization after plugins property.
The new property expects to get an object with configuration.
In our case the object is going to contain the following line:
minimizer: [new TerserPlugin({extractComments: false})]
and webpack.config.js file will look like this:

Let's explain it a little bit. Using minimizer allows overriding the default minimizer by providing a different one or more customized TerserPlugin instances.
The minimizer is using a new instance of TerserPlugin with an option named extractComments which is set to be off. After running
yarn build:test and sneak peek at the build folder, the LICENSE file has disappeared and onlybundle.js left. By opening the bundle.js file, we can see our comment that was created by the banner plugin.

Thank you for giving your valuable time to this article. I hope you enjoyed it while reading.
Happy Coding!