Build Tool: Webpack

Posted on Aug 08, 2017

Build Tool: Webpack

In today’s fast paced life, nobody has time to spare. When it comes to develop IT solutions, every dev wishes to have a out-of-the-box solution, that requires minimum or nil configuration. In order to fulfill this specific need, One of the solutions that comes in mind, are Build Tools and in this blog, we are going to focus on webpack.


What are build tools:

Build tools can be treated as a program, that can

– Manage dependencies
– Compile source code
– Link and Package the code
Run test cases
Deploy the code to production etc

The first benefit that we get out of the build tools is that everyone gets the exact dependencies to work with so, chances, of code not working on any other system, are close to nil.

Build tool examples can be:
Ant, Maven, Phing, Webpack, Browserify, Grunt, Gulp etc.

Here we are going to focus on javascript build tool: webpack.  

What is webpack

– A build tool
– Puts all of your assets (js, css etc) in a dependency graph
 Includes JS, CSS, images and fonts
Suitable for large apps
– Allows you to selectively load modules
Gives a performance boost to the app


What is a dependency graph:

In conventional app, dependencies can be stated as:

<script src="jquery.min.js"></script>
<script src="main.js"></script>

From the above snippets, we can conclude following:

– In a front-end app, include dependencies in a specific order for those to work
Difficult to track the order of dependencies in large applications
– Can cause slow performance due to excess http requests

The webpack way

– Build small files in your app
Use require() and import to tell their dependencies
Specify an entry point to Webpack


How does it work:

– Webpack starts at the entry point
Creates a recursive graph of all the dependencies
And bundles them into very few output files!


Impact on Project development:


– Dead Asset Elimination
Live reloading
– Hot Module Replacement
Controlling How Assets Are Processed
– Stable Production Deployment
Code Splitting
– Separate features for Production & Development build


– High Learning Curve
Complex Documentation

However, good community support can help you in times of need, for most cases.


Benefits of Webpack Over other build tools:

– provides full control over how to split the application code
– comes with the core functionality of module bundling
can be extended by using plugins and loaders
Great for working with static assets like images and css
Provides live server reload and Hot Module Replacement
– Unlike Grunt and Gulp it does not look into specific paths but the
whole project and bundles it recursively
– Unlike Browserify, it does not need to be coupled with any other task
– It is the latest in build tools, and is here to stay!


Pitfalls to watch out for:

– For a small javascript application, Webpack might be more of a overhead than a need.
Be careful:
a) About syntax breaking changes between minor version releases
While updating your webpack npm version, check that all
webpack plugins
are working fine
Use tools like webpack-bundle-analyzer & webpack-runtime-
to help avoid pitfalls

I hope, i was able to give an idea about the up and down of the mentioned build tool. In order to see, the code in action, follow our next blog.