Why do we need a module bundler like Webpack? What even is a module bundler? When I first started coding I was wondering the same thing. Surely it is as simple as just putting your Javascript code in a browser?
The core function of Webpack is allowing you to use Javascript modules during development and bundle them up into one big file that the browser can use.
This big file is called a "bundle" in Webpack parlance. A module bundler then is something which collating lots of small pieces into something larger and self-contained.
The powerful ecosystem of Webpack plugins and extras makes Webpack seem confusing as it appears to do so much. All the extra things such as compiling ES6/7 to ES5, CSS modules and code splitting are just nice extras afforded to us by Webpack.
An optional feature exists called code splitting. This feature slices the bundle generated from your source code into little bundles. The advantage of having lots of little bundles is that they can be loaded on demand meaning the user doesn't have to download the whole app up front in one big bundle.
Why do we need a module bundler?
We need a module bundler like Webpack to resolve dependencies. On the server side Node has a built-in module resolver where you can "require" modules or in ES6 this syntax is 'import'. However browsers do not come with this functionality built in.
Webpack can understand the relationships between multiple files and "resolve" them in a process called dependency resolution. If one depends on another we call the latter a dependency of the former. The process of dependency resolution involves traversing all the files in your code starting from the entry point. The process is recursive or in other words self-repeating. Dependencies of dependencies are followed until they are all mapped out. The starting point is a file Webpack calls the "entry point" often named "app.js" or "index.js".
Dependency resolution doesn't just which files are needed but the order they are required in since any dependency can rely on another.
Why the need for modules?
Without Webpack we have two options.
1 - Develop from one big file. This would make development impractical as readability and maintainability would be severly hampered.
2 - Have lots of include statements in the HTML file of your app and imports all your Javascript files and their dependencies individually. This means lots of network requests for each asset and also it simply doesn't scale to usefully sized projects.
Single Page Applications and the need for more Javascript
Traditionally apps have been server side rendered. This means that a request is made by a client to a server and all the logic is on the server. The server spits out a static html page back to the client which is what they see in their browser. This is why whenever you navigate in old server-side rendered apps you will see the page flash as it refreshes, there is a delay while the server generates the new page.
Nowadays single page applications (SPAs) are becoming ever more popular. SPA's are windowed within a single URL and we never need to refresh. This is considered a nicer experience for the user as it feels slicker not having to refresh. The downside of course is that SPAs are more complicated than their counterparts.
As SPAs dynamically generate their content in the browser there is simply more code as a result. On the other hand server side rendered apps generate static pages which usually don't have a lot of code which generates dynamic content. A module bundler has been needed more and more as the popularity of SPAs has risen. With server side rendered apps we can get away with sprinkling in a few includes in our HTML file for the relatively small amount of Javascript files we needed to include.
What is Webpack Dev Server
You may have wondered how Webpack differs from Webpack Dev Server. The latter as the name suggests, is NodeJs server. Its purpose is to propagate changes from your webpack bundle to your browser during the development of your app updates your browser with the changes in your code from your bundle as you develop on your machine.
Hot Module Reloading
Hot module reloading is an additional extra which makes your development life easier. This feature allows the app to continue running in its current state whilst the parts you are changing can be swapped out live. We inject only the parts of the code we have edited in order to refresh only the parts of the app we have changed - the hot modules whilst the cold modules are left the same keeping the state in our browser. As an example say you are on the "about me" page of your app and you update the colour of the navbar you don't want to be redirected back to the root page of your app you want to stay on the page you are on and see the navbar colour change.
Fear the bundle
Finally have a look at BundlePhobia if you want a useful tool for calculating the effect an NPM package will have on your bundle size. The size of some popular packages might surprise you.
Top comments (0)