Use Webpack to bundle Javascript

[rrojan]

You might have noticed all major frameworks like React, Angular, etc use Webpack or a similar bundler to bundle their Javascript.

This is because when we are working with Javascript these things can happen:

• Code grows large and we have to manage it in multiple JS files
• You might want to use imports in your JS for libraries
• You want to use the latest Javascript features like async await, optional chaining, etc but web browsers dont support it

So your code will break if you do any of these things.

This is where something like Webpack comes in.

Every production project using JS should use webpack to boost the speed of the website and manage complexity. This is a small project however we'll try to use Webpack for learning about it.

Good article to learn about Webpack: https://medium.com/js-imaginea/webpack-why-and-what-4948433cc2d3

TODO: Configure Webpack using webpack.config.js or similar, and create a bundle.js for this project. Link index.html to bundle instead of script.js

Also configure Babel. See JS Transpiling

[rrojan]

You can also use esbuild or Vite for this hai!