Module Bundlers Explained... Webpack, Rollup, Parcel, and Snowpack

Key Takeaways

to build a website you only need three ingredients html css and javascript that sounds pretty straightforward on the surface but here's the problem nobody just uses html css and javascript to build a website you might replace javascript with typescript then throw in a ui library like react to replace html you'll definitely need a css preprocessor like sas then you'll need to import a whole bunch of third-party modules so you're not doing everything from scratch many of your dependencies might use common js which isn't going to work with your modern es module syntax the code will have name collisions all over the place and even if you do manage to get it to work you'll likely end up with a massive javascript file which then needs to be minified and broken into smaller chunks just so people can visit your site with a reasonable load time you'll also need to create different versions of your javascript and load polyfills to ensure that your code works on legacy browsers as a developer it's like being asked to land on the moon with a lawn chair and some balloons tied to it it's truly the most annoying aspect of building a web application but thankfully we have module bundlers which make this entire process a little less annoying in today's video you'll learn everything you ever wanted to know about module bundlers like webpack roll up parcel and snowpack we'll primarily focus on webpack because it's the most popular but most of the core concepts that we'll look at apply to all of them but make sure to watch until the end when we look at snowpack because it uses a technique that is much different than the others and represents what i think will be the future of front end web development if you're new here like and subscribe and consider becoming a pro member at fireship io or sponsor me on github for even more content let's start by answering the question of what is a module bundler i already presented a long list of problems and the role of the module bundler is to fix these problems the most fundamental thing they do is take multiple javascript files and combine them into a single large file that can be then used in the browser to load your javascript app this file or the javascript bundle as it's called contains your source code along with any third-party dependencies that you've imported your dependencies also likely have their own dependencies that need to be imported a bundler like webpack creates a dependency graph to keep track of how to put everything together you just tell webpack where to find your entry point and it will look at all of your imports and dependencies and try to piece everything together into that single file the best way to really learn how this process works is to do it yourself go ahead and open up vs code and we'll do everything step by step so you can follow along with this video from an empty directory create an index.js file in the source directory now currently this file doesn't have any dependencies so there's no need for a module bundler we could simply run this file with node or directly in the browser things get more complicated when we add dependencies like those from node package manager run the command npm init flag y to create a package.json file now let's install the world's most dependent on javascript library lowdash when we run npm install it adds node modules here to the root directory and then adds lowdash to the dependencies object in the package.json now what we want to build here is a frontend web application so i'll create a public directory and inside that directory add an index.html file i'll add some initial html boilerplate then in the head of the document add a script tag that references our index.js file now currently our javascript code isn't using lowdash or any dependencies yet if we view this file in the browser you can see we get our hello world console logged here without any errors but now let's go back to our code and see what happens when we try to use a dependency from lowdash we'll go ahead and import the camelcase function and then camelcase our console.log now let's go back to the browser and try to view our website you'll notice we get an error in the console the reason we get this error is because the browser doesn't know how to resolve the low dash code in other words you're asking it to find something but it has no idea where to find it and that's where something like webpack can help us out to use it we first need to install it as a development dependency we'll install the webpack cli along with webpack itself now most often when you bundle your production code you'll use a script here in the package.json file we'll give the script a name of build and it simply calls the webpack command at this point we can execute our script and run webpack by entering npm run build from the command line webpack will analyze the code in our index.js file and then compile it to a dist main.js file which is our production code or the code that we would ship to the end user in the browser so with that being said let's go into our index.html file and we'll change the path in our script tag to point to the main.js file if we reload the browser the error should be gone and we should see hello world in camelcase congratulations you just bundled your first module it's important to note that we're currently using the default webpack config and by default it looks for the source index.js file if your files name something else it won't work in most cases though you'll want or need to customize the behavior of webpack in which case you can create a webpack config file the file itself is a javascript module that exports an object that customizes the behavior of webpack let's take a look at some of the most important parts of the object so you're not totally confused if you're the unfortunate developer who has to modify the webpack config the first attribute is entry which defines the entry point to your application in our case that's the index.js file in the source directory it's also worth noting that entry can be an object to support multiple entry points you might see this used to support a technique called code splitting so they're only loaded on the pages that actually need that code it's beyond the scope of this video but it's just good to know what code splitting means from there we have output which is the name of the file that we want to compile our javascript to by default it's main.js but we may want to change it to something else and when determining the file location we can use node.js utilities like path to resolve a consistent path name now if we go ahead and run the build command again you'll notice it outputs our bundle to a file called awesome.js that's pretty straightforward but you often have more to worry about than just javascript when building a full web application let's make things a little more interesting by adding an scss file to our code not only is this file not javascript but it also needs to be compiled by the sas compiler we can make the file known to webpack by importing it in our index.js file but when we try to compile our code you'll notice we get an error that says module parse failed currently no loaders are configured to process this file but what is a loader exactly in webpack a loader is a way to pre-process a file in our case we want to import some css code then tell our javascript to inject that css in the dom when our web application is loaded essentially loaders provide a way to handle any kind of file that's not plain javascript loaders exist for pretty much every use case you can imagine including typescript markdown and various css preprocessors in our case we're going to use three different loaders style loader css loader and sas loader we can install these packages in our development environment then we'll go back to our webpack config then add the module attribute in this section we can add one or more rules that will match a certain file type to the required loaders the rule itself will have a test attribute that is a regular expression that matches any file that ends in scss when webpack encounters one of these files it can use the following loaders to process the scss into regular css and then to javascript so it can eventually be injected into an html page let's go ahead and save the config and then run our build command again when we open the output main.js we can search through it and we'll find our css code embedded here loaders will likely do most of the heavy lifting for you in webpack but you can also tap into the webpack compiler directly using its plugin system a plugin allows you to tap into the entire compilation lifecycle we're not going to build a plug-in from scratch in this video but we'll look at how to use one of my favorite open source plugins the webpack bundle analyzer we can install it with npm and it will tell us exactly how big our javascript bundle is and which dependencies are contributing to its size in our webpack config we'll first import the bundle analyzer plugin then we'll go down and create a plugins array and instantiate the plugin there now if we run the build command again it will bring up this visualization of our javascript bundle as you can see here loadash is taking up the majority of the space and we can optimize that by only installing the actual functions from lodash that we really need for the app now one annoying thing that we've been doing at this point is running the npm build command every time we make a change another way bundlers help you out is by setting up a local dev server to watch changes to your project and recompile them so you don't have to do it manually first we'll use npm to install webpack dev server then we'll go into our webpack config and use the dev server option to configure the files that we want to serve and the port that they should be served on you can also configure the server for compression and hot module replacement in any case we likely want to add another npm script at this point we'll go ahead and give it a name of dev and it will run the webpack serve command if we go ahead and run that script with npm run dev you'll notice it loads up a server on localhost 9000 and it will also watch the source directory for any changes and recompile anytime we save a file so hopefully that gives you enough to get started with webpack without feeling overwhelmed other popular module bundlers like rollup and parcel are very similar to webpack but try to achieve the same result with less configuration those are definitely tools you should be aware of but what i want to focus on next is a relatively new bundler called snowpack one thing you might have noticed when we were using webpack is that it took a while to compile all of our code each file change would take about four seconds to compile our css and javascript into a new bundle and it can be a super annoying waste of time especially on larger projects snowpack takes a different approach to handling modules and development instead of recompiling on every change it builds all of your dependencies once and then ships them directly to the browser that means when you make a change to your javascript code it can be reflected in the browser instantly snowpack only needs to rebuild one file instead of going through the entire dependency graph this is really awesome when you have a big complex project because as your project grows bigger your build times don't they stay consistently fast i've been using it for a personal project of mine and the developer experience has been awesome so i'd highly recommend checking it out for your next project i'm going to go ahead and wrap things up there if this video helped you please like and subscribe and consider becoming a pro member at fireship io for more advanced content thanks for watching and i will see you in the next one