Webpack for Novice Developers

An elementary understanding of the webpack bundler for beginners.

In the current development paradigm, ‘Webpack’ is an essential tool for easing a very important process of development cycle i.e. namely static module bundling. The importance of this step lies in the underlying mechanism of generating internal “Dependency Graph”.

Files in a typical project ‘require’ multiple assets or dependencies, which in nature may be code-based like Node Packages/ other JS files or non-code based assets like image, web-fonts, sound, etc.
The order in which these dependencies need to be loaded and are ‘require’-ed or ‘import’-ed in files leads to Dependency Graph outcome. Hence Dependency Graph defines all the required direct or indirect module/asset dependencies in an application.

Entry Points

When webpack processes any application, it starts from the ‘Entry Point’ to recursively build an internal dependency graph “that includes every module your application needs, then bundles all of those modules into a small number of bundles —oftentimes, just one”.

By default, the value ‘./src/index.js’ act as the module entry point for any application in webpack. Rest webpack figures out all the (direct or indirect) module & library dependencies for the entry module.

Output Point/s

Vice versa an ‘Output Point’ determines where the Webpack puts / emits the generated distribution bundles. This primarily defaults to ‘./dist’ folder for all the static assets and ‘./dist/main.js’ the main output file.

The contents on ‘./dist’ are ready-to-go and a standalone image of the live web-app. Now you simply upload the contents of dist/ to your CDN, deploy your new code to see the live application.

Processing other filetypes — Loaders

Proceeding ahead, one important observation regarding webpack is about the out of the box support only for JavaScript and JSON. Webpack’s solution to process other file types is “Loaders”. “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.”

Loaders are defined as “rules” for module processing, which has two required properties namely ‘test’ & ‘use’. Test identifies which files should be transformed and accepts regexp as value like “/.png$/” to check filetype. Use indicates which loader should be used to do the transforming & accepts string value for loader name example “file” for File Loader.

In Layman terms, this configuration will tell webpack:

“Hey webpack compiler, when you come across a path that resolves to a ‘.png’ file inside of a require()/import statement, use the File loader to transform it before you add it to the bundle.”

Writing Our Own Custom Configuration

Above user-defined configuration brings us to the next topic of writing custom webpack configuration.

A simple custom webpack configuration file can be created with the below content:

A Basic Example Code Snippet

Here ‘path’ is a core Node.js Module used for processing file-paths, according to the client’s OS platform.

‘entry’ gives the custom entry module. Here it’s important to discuss that entry can accept an object comprising of multiple entry module paths.

module.exports = {
                  entry: {
                          app: './src/app.js',
                          adminApp: '.src/adminApp.js'
                          }
                  }

This is known as “Multi-Main entry”. Further reference can be found at “Entry Points”.
This notation can be paired with an object value for the “output.path” property as well which will generate separate Outputs bundle for each entry. The Object will look like:

output: {
         path: outputWebpackPath,
         filename: '[name]/js/[name].js'
         }

Filename as ‘[name].js’ is used for utilizing the entry name itself for the output filename.

Further reference can be found at “Output”. These all form the basic set of configuration properties, for creating own custom webpack configuration. To execute the aforementioned webpack configuration, the “scripts” entry in package.json can be modified as “webpack-script-name”: “webpack — config webpack.modules.config.babel.js — display-error- details”. Here “ — config” parameter is passed followed by the name of custom webpack configuration filename. “ — display-error-details” is an additional parameter that can be passed optionally to display error details in case of execution time errors.

Herein it is important to keep an eye for the browser compatibility of webpack as it supports browsers that are “ES5-compliant” thus IE8 and below are not supported.

Benefits of Webpack

Benefits that webpack brings to the table are many, but some basic and important benefits can be jot down as below:

• Dead Code Elimination or Tree Shaking
• Dead asset elimination
• Greater Dev control on asset processing

This finishes a basic overview of the webpack and its use in the application lifecycle. Though the fact is evident that initial start-up with webpack might be slow but later benefits are huge once webpack has been properly set up for your web-app iteration.

PS: Please provide your inputs on whether you find this blog helpful & would like to get more on the above or any other technology topics.
Inputs on what & how I can further enhance more on this topic or my blog style will be highly appreciated. Thanks!