What is a Module Bundler? And why do I need one? Learn how tools like Webpack, Rollup, Parcel, and Snowpack can package your code as a production-ready web application. https://fireship.io

Webpack https://webpack.js.org/
Snowpack https://www.snowpack.dev/

Sponsor me for $1 https://github.com/codediodeio

#webdev #tutorial #javascript

Install the quiz app 🤓

iOS https://itunes.apple.com/us/app/fireship/id1462592372?mt=8
Android https://play.google.com/store/apps/details?id=io.fireship.quizapp

Upgrade to Fireship PRO at https://fireship.io/pro
Use code lORhwXd2 for 25% off your first payment. 

My VS Code Theme

- Atom One Dark 
- vscode-icons
- Fira Code Font
2024-02-04T06:04:11.475Z
nova-2
2-general-nova
2024-01-09.29447
30089e05-99d1-4376-b32e-c263170674af
3168178d-7f53-4917-af7b-4a83dbac1ab7
d33b7fe242535bdf97f6fbcbe8408483e0221d2454c28c3f0a285760e22d07f5
67875a7f-c9c4-48a0-aa55-5bdb8a91c34a
deprecated
To build a website, you only need 3 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 Sass, 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, Rollup, 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 sponsoring 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 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 Versus Code and we'll do everything step by step so So you can follow along with this video.
From an empty directory, create an index dot j s 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, lodash.
When we run npm install, it adds node modules here to the root directory and then adds Lodash to the dependencies object in the package JSON.
Now what we wanna build here is a front end 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 Lodash 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 Lodash.
We'll go ahead and import the camel case function and then camel case 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 Lodash 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 camel case.
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 dotjs file.
If your file's named 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 Buildings 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 dotjs.
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 Sass 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 preprocess 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 3 different loaders, style loader, CSS loader, and Sass 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 1 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 dotscss.
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 plugin 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, Lodash 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 you 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 local host 9,000 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 wanna 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 4 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 gonna go ahead and wrap things up there.
If this video helped you, please like and subscribe and consider becoming a pro member at Fireship I o for more advanced content.
Thanks for watching and I will see you in the next one.

Speaker 0: To build a website, you only need 3 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 Sass, 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, Rollup, 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 sponsoring 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 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 Versus Code and we'll do everything step by step so So you can follow along with this video. From an empty directory, create an index dot j s 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, lodash.

When we run npm install, it adds node modules here to the root directory and then adds Lodash to the dependencies object in the package JSON. Now what we wanna build here is a front end 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 Lodash 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 Lodash. We'll go ahead and import the camel case function and then camel case 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 Lodash 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 camel case.

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 dotjs file. If your file's named 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 Buildings 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 dotjs. 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 Sass 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 preprocess 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 3 different loaders, style loader, CSS loader, and Sass 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 1 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 dotscss. 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 plugin 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, Lodash 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 you 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 local host 9,000 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 wanna 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 4 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 gonna go ahead and wrap things up there.

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