Note: This post was automatically migrated from Markdown to Typst using AI. Read more about the migration process here. Contact me if something in this post is off and bothering you.

Intro to Webpack

Alot of Webpack introdutions focus on how to set up your first webpack configuration. What I want to do in this article is taking a step back and look at what webpack is actually doing before going into the setup and all its complications.

The problem ———–

In the frontend we have a variety of targets that we want our applications to run in, and they are all browsers. Some old, some new.

While the Javascript ecosystem is evolving at an extreme pace and SPAs + more complex web applications become the norm, the browsers evolve slowly. In addition alot of people still use outdated ones, which might be due to workplace restrictions or the proper longterm use of hardware.

Now we have a dilemma. We want to write complex applications in Javascript, but in the browser we usually load an app via a single file. React is a good example. You would usually load it with sth like:

    <script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>

But the developers definitely did not develop this complex piece of software in just one file! The complexity of doing that with a team of developers and even alone would have too many downsides.

Looking at the repository we can see a lot of different folders and files, that all host their specific part of the application logic.

Unfortunately the picture that was here has been lost into the void

In order for the different parts to use each other and share functonalities they are using the import syntax in Javascript. If you do not know how this works you can read about it here or just do a quick duckduckgo search.

The downside of this approach is that most of the aforementioned browsers do not yet, or never will support it. In addition to that all of those would have to be loaded over the web individually. While this is one thing that HTTP/2 might make less of a problem, it still is one to date.

Enter webpack ————-

This exact situation is where webpack fits in perfectly!

In order to get all your different components and Javascript files that import each other to work in the browser you will need to bundle them together somehow and in essence webpack will do just that. It take multiple files and figures out how they import each other and then bundles them together into 1 big file that provides wrapper functions to mimic the process of importing.

Lets make this a bit clearer with the following example:

    // mathHelpers.js
    
    export function add(a, b) {
      return a + b;
    }

    // main.js
    import { add } from "./mathHelpers.js";
    
    function main() {
      const a = 5;
      const b = 37;
      const result = add(a, b);
      console.log(`The result of ${a} + ${b} = ${result}`);
    }

We have the main file which imports the mathHelpers to do some difficult calculations. This helps us to split out different parts of the application into different files. The benefit being a good structure and reusability of f.e. the math functions.

Now we are going to have to bundle those 2 together into 1 file.

The first step is installing webpack. To use it on the command line we need to install it on the computer with npm i -g webpack-cli.

Afterwards we can just run webpack main.js --mode=none in our application folder and the bundling is done! Its really that easy.

The mode option just says that no optimizations should be done, and all we want is a bundled file to check out its contents.

After the operation has completed we can inspect the bundle in the newly generated dist folder.

The content is a large machine-generated file that includes the webpack bootstrap code and our modules wrapped in functions. It defines a __webpack_require__ function to handle the module imports and then executes our entry point. Note: I had to remove the code when migrating to typst, as it managed to hang the compiler

Dont worry too much about all of this machine generated code.

Whats important to understand is that the top of the file is the functionality that webpack provides to fake the importing that we are using in our files.

If you inspect the bottom of the file though, you can see that we still have our main and add function. The difference here is though, that the main function now calls Object(_mathHelpers_js__WEBPACK_IMPORTED_MODULE_0__["add"]) instead of the add function directly.

We have now reached a basic understanding of webpack and can say that the different modules are bundled together under an object and named in a way that all other modules know where to find the functions that they need. All the calls to other modules are then also automatically replaced with the correct call to the Object+Name.

What now? ———

With this knowledge as a basis you can now start with understanding how the basic webpack main.js --mode=none can be used with configurations to apply some transformations to your codebase. This will allow things like using the latest EcmaScript features, code splitting and many more, some of which I will cover in later posts.