Using Webpack
Understand how to set up and configure Webpack for building a universal JavaScript application that works in both Node.js and browsers. Explore creating shared modules, bundling code, and leveraging cache busting for efficient deployment. Gain hands-on experience with a simple example using ESM and template libraries.
We'll cover the following...
Now that we know how a module bundler works, let’s build a simple application that can work both on Node.js and on the browser.
Note: The code has been intentionally simplified just to illustrate how module bundlers work. There are many edge cases that we didn’t take into account. For instance, what happens if we require a module that doesn’t exist in the modules map?
Throughout this lesson, we’ll learn how to write a simple library that can be used without changes from the browser app and the server app. We’ll be using webpack to build the browser bundle.
To keep things simple, our application will be nothing more than a simple “hello world” for now.
Let’s start by installing the webpack CLI in our system with the following command:
Let’s also initialize a new project in a new folder with the ...