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:

Positives:

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

Drawbacks:

– 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
runner
– 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
b) 
While updating your webpack npm version, check that all
webpack plugins
are working fine
– 
Use tools like webpack-bundle-analyzer & webpack-runtime-
analyzer
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.

Cheers!