Welcome to the Metric Tree Labs blog series. (I would advise watching the video along with the content to visually understand the concept better)
Today we are going to cover Webpack.
Webpack is a widely used Bundling tool. Bundlers allow us to package, compile, and organize many assets and libraries needed for a modern web project.
In this tutorial, we'll see how to write modules, bundle code, and use some of the loader plugins. This tutorial is designed for total beginners to Webpack, but having some JavaScript knowledge is advised.
So,
Starting with creating an empty folder by mkdir command and run npm init inside the folder.
This will create an npm scaffold that we can use to run npm commands.
We dont need these values so, keep as it is.
Now we’re going to install webpack and wbpack-cli. using npm.
I’m using vscode.
Then, we want a webpack-config.js file. It consits of two parts , the entry point to our js. And
output path to export our bundle.
Now we’ll set up our app’s entry point. Create an src folder in out directory and create an index.js.
Just to show is as loading, We’re logging an output; This will load whenever index.js loads.
Now, to start bundling our src folder, we need to edit our package.json file. Build and watch scripts will take care of this.
Webpack -p will minify and make our code ready for production and webpack –watch will observe any changes in our file and budles it in real time.
Run the command by running “npm run watch” to watch all the files inside src folder for any changes . And when a change occurs, the webpack will incoporate the relevant changes in our bundle.
Then, we need an HTML file to host and run our bundle. I’m using emmet for quick
scaffolding for an HTML page. And attach our bundle.js in our index.html page.
I’m using PHP as my server. And in our browser load the page.
If we, check out the console of the page and we can see the log. And our page works.
This project consists of only one file and it’s not much like a real-world javascript app.
To make this, We’re adding one more file. Create a new file in our src folder and export the function from the file.
Then, import it in our index file. webpack supports import, require most of all js imports. So we don’t have to worry about it.
Import it to our entry point and call the function that we’ve exported from our greet.js file.
Boom!. It works.
Now, We’re going to import a package to our functions to make it more realistic.
Install moment, a js date parser package to our greet.js file.
As we did before, Import the moment package.
Moment() will return today’s date and format() will format the output, as we configured, It will return today’s day by passing ‘dddd’ to format().
And append the day to the log of our greet function.
And we refresh..
Yeah, The day is shown.
So, if we look into the bundle.js inside the dist folder, we can see a minified js file that includes every package, functions that’s imported in index.js and its children.
We only linked out bundle.js file to our page and it loads every action that we’ve imported.
So, Simply, the webpack takes away the burden of handling multiple files on our page and minimizes the load time of our app.
That’s the core of Webpack and this is the actual working of webpack in today’s real world
javasript apps.