What is Webpack? Introductory Beginner Course

TRANSCRIPT

So the first tool that we're gonna look to use is Webpack. So if you're not familiar, Webpack is a module builder and what that means is, Webpack is a tool that we use during development of our code. It's not something that's actually used during the run time of our assets. So, it's only used during development. So Webpack is a tool where you use a configuration to explain how you want the builder to load specific things. You describe to Webpack how you want to load your JavaScript files or how you want it to look at your SVG, CSS or JPEG files. Then when you run your, the Webpack builder it will go into our entry point so what is the main file of our program and it will walk up and down our program to grab all of these assets and it will figure out what needs to be done with them. So in the case of how we're going to be utilizing it for our project is we're going to have all of our JavaScript files separated out as they are now and it's going to go through and bundle all these files together and to create one JavaScript file for us so this would be our bundle it's gonna bundle everything in together so that way all of our code is optimized into one location. Furthermore, we're gonna be able to use plugins like Babel to take our JavaScript code that will be written in ES6 syntax and it can modify and transform it back into ES2015 standard. So that way it's supported across all browsers. And this is another benefit of using Webpack because we can use these plugins to do all this for us and then that way it ends up in our bundled file. So to actually use Webpack, it's actually quite easy. It's available through NPM so we can install it like any other node package and then what we need to do is we actually need to create a configuration file so Webpack config file and that'll allow us to tell Webpack how to bundle our code.