Webpack

Webpack is an open-source JavaScript module bundler. It is made primarily for JavaScript, but it can transform front-end assets such as HTML, CSS, and images if the corresponding loaders are included. Webpack takes modules with dependencies and generates static assets representing those modules. It runs in NodeJS platform.

The original purpose, and it remains the most common use case for Webpack, is front-end JavaScript bundling, in the case where you are using a JavaScript-based backend such as NodeJS, then you can use Webpack in backend also.

Before move into the core concepts, If you wish to see my demo project on Webpack, visit to my following GitHub account….

GitHub - prasanthse/Webpacks

The Core Concepts of Webpack

There are 6 core concepts in Webpack.

• Entry
• Output
• Loaders
• Plugins
• Mode
• Browser Compatibility

Entry

An entry point indicates which module Webpack should use to begin building out its internal dependency graph. Webpack will figure out which other modules and libraries that entry point depends on (directly and indirectly).

By default its value is ./src/index.js, but you can specify a different (or multiple entry points) by setting an entry property in the Webpack configuration.

Output

The output property tells Webpack where to emit the bundles it creates and how to name these files. It defaults to ./dist/main.js for the main output file and to the ./dist folder for any other generated file.

Loaders

Out of the box, Webpack only understands JavaScript and JSON files. Loaders allow Webpack to process other types of files and convert them into valid modules that can be consumed by your application and added to the dependency graph. One of Webpack’s specific features is the ability to import any type of module, e.g. .css files, which may not be supported by other bundlers or task runners.

At a high level, loaders have two properties in your Webpack configuration:

1. The test property identifies which file or files should be transformed.
2. The use property indicates which loader should be used to do the transforming.

Plugins

While loaders are used to transform certain types of modules, plugins can be leveraged to perform a wider range of tasks like bundle optimization, asset management and injection of environment variables.

Mode

By setting the mode parameter to either development, production or none, you can enable Webpack's built-in optimizations that correspond to each environment. The default value is production.

Browser Compatibility

Webpack supports all browsers that are ES5-compliant (IE8 and below are not supported). Webpack needs Promise for import() and require.ensure(). If you want to support older browsers, you will need to load a polyfill before using these expressions.

Why do we need Webpack?

• Concatenating multiple files in a correct order is really hard when the file sizes increase.
• Multiple files requires some other files ( it’s dependencies) and then we need to include that mapping in our earlier concatenation approach.
• The project has a certain size and uses certain technologies like SASS, JavaScript, Typescript etc. So when project size increase then difficulty of handle the projects also increase.
• When the project size increase then the amount of dead code will increase without our knowledge.
• The time it takes to fully load a web page even for a small change of a line of code.
• What if you use an advance JavaScript and your JavaScript codes not compatible in older versions of browsers?

Here the Webpack comes into play,

• Webpack gathers all the dependencies, which includes not just code, but other assets as well, and generate a dependency graph.
• It goes through the dependencies of each file recursively, and resolves every dependency until the traversal has completed and automates the process of downloading/including modules. So it’s being used often in the frameworks/libraries.
• Every file has its own module with its own scope. As a result, this is notably effective if you start using more and more dependencies
• It maintains a registry of all the modules, so they can be correctly called/executed whenever they are required.
• This has been proven to boost productivity because our page doesn’t need to trigger a full reload just to reflect our changes on our JavaScript code. It will not only apply to JavaScript, but our CSS code can also benefit from this feature by adding CSS loaders in your Webpack config. So, this makes our development time much faster.
• We have a total control over building systems like babel.
• It will notify the dead codes in our system as “Unused modules”. So we can maintain a proper system using Webpack without any unwanted modules.

Let’s see some real world examples of Webpack

3788 popular companies reportedly use Webpack in their tech stacks such as,

• Airbnb.
• Pinterest.
• Instagram.
• Udemy.
• Robinhood.
• Discord.
• CRED.
• Stack.

Some famous frameworks also using Webpack for their bundling purposes,

• Angular
• React
• Vue.js
• Rails

It’s demo time…

Here I’ll choose my editor as visual studio code and if you need to work on any other editors, you can feel free to work on it.

Before move into the demo make sure, you have NodeJS installed in your pc.

Step 01

Create an empty folder and open the folder with your editor and in your editor terminal type,

npm init -y

to initialize your project. Here you will get a package.json file.

Step 02

Now type,

npm install webpack webpack-cli --save-dev

and install Webpack CLI and you can see a new file named package-lock.json created in your project.

Step 03

Next install npm modules using the following command.

npm install

Step 04

After that create a file as your own and rename that file as webpack.config.js

This is your configuration file for webpack.

Step 05

Now before my configurations, I am going to install some loaders for my project. Because like I mentioned above, Webpack only understands JavaScript and JSON files. Loaders allow Webpack to process other types of files and convert them into valid modules that can be consumed by your application and added to the dependency graph. So Install the following commands one by one,

npm install svg-inline-loader --save-dev

npm install --save-dev css-loader style-loader

npm install --save-dev babel-loader

If you need to work on other types of files, you need to install those files’ loaders in npm official website. https://www.npmjs.com/

Step 06

Before move into configurations, add all your project related files like html, CSS, JS etc inside your project. For my demo purpose I created index.html and main.css inside a folder called app.

Step 07

This is the time for the configurations. Here you need to create an object named module.exports and write down all your configurations inside the object. All our core concepts are going to written inside this object.

Step 08

First I am going to tell what is my entry point to start the bundling process. Then I will create an object inside module.exports called module and inside my module object will create an array called rules.

Remember, if you install any loaders as I mentioned before, you need to configure them in your rules section.

In my case, I will start my bundle process with a file main.css. You can start with any file you want :)

Step 09

After that configure my output configurations. In order to do that first you need to import path from nodes. Then can mention a folder name and output file name where you going save your output bundle.

Here in my case I will store my output inside a folder name dist and the file name is bundle.js

Step 10

Next I am going to install plugins. You can install any plugins you want. For my purpose I will install html webpack plugins. The HtmlWebpackPlugin simplifies creation of HTML files to serve your webpack bundles. You can either let the plugin generate an HTML file for you, or can supply your own template.

To install the plugin type npm install — save-dev html-webpack-plugin.

Here I mentioned my own html file inside the template. So what it will do is, once it bundle the output, It will automatically inject your bundle in your html file head section.

Step 11

Final part of the configuration is to mention the mode. By setting the mode parameter to either development, production or none, you can enable Webpack's built-in optimizations that correspond to each environment.

This is all in the webpack configuration section. at last you need to configure a couple of things in the package.json

Step 12

Before move into package.json configuration, first install,

npm install webpack-dev-server --save-dev

It will install a local server for you.

Now add the following commands to start your server or build your webpack bundle.

Now let’s run your server and also build your bundle and see the magic that created by Webpack.

Do you need to know how to apply multiple files to bundle your project? Visit my GitHub account which I mentioned at top of this blog.

Thank you so much for your patience. Good luck :)