How to introduce webpack 5 to old code base

Let's say you have old code-base, and you want to modernize it a bit without starting a whole project of reorganizing the whole foundation of your project.

Code

To simplify, let's assume we we have 2 file:

messages.js:

function sendMessage(message) {
  console.log(message);
}

hello-world.js:

function helloWorld() {
  // this line assumes sendMessage was injected before & is available on the global scope
  sendMessage("hello world!");
}

The files are meant to be included directly in HTML, and they are both polluting the global scope & expecting their dependency to be there too.

Advantages to add webpack to the mix

With code-base in this state we probably won't have time or patience to rebuild how everything is build & migrate completely to modern, module based architecture. But there are some advantages of using webpack or other similar tools:

we can easily introduce babel & modernize at least a bit the JS we write

we could even go all way to migrate parts of code base to TS

we can start replacing the integration via global scope with imports one file at the time

with can make our set up slightly more similar to the industry standards

How to add wepack

We can start one file at the time. In a given file, we have to point out all function, constants etc. that are meant to be accessible form outside of the file with export. So in our example we will have:

// src/messages.js
export function sendMessage(message) {
  console.log(message);
}

and :

// src/hello-world.js
export function helloWorld() {
  // this line assumes sendMessage was injected before & is available on the global scope
  sendMessage("hello world!");
}

to have an overview of what is done in which way, I would be moving files from one folder to some other. Here I started with files in root of a project, and move them to ./src/. Inside the files, the only difference is adding export before the function declaration.

The wepback config that will build the files is as follows:

// webpack.config.js
module.exports = {
  entry: {
    messages: "./src/messages",
    "hello-world": "./src/hello-world",
  },
  output: {
    library: {
      type: "global",
    },
    filename: "[name].js",
  },
};

I have to specify explicitly each files I want to be managed by webpack. Hopefully there will not be many of them, but if there were, it's another reason to consider migrating to use imports across our codebase.

With a set up like this, our index.html is:

<html>
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <title>Webpack sdk</title>
    <link rel="shortcut icon" href="#" />

    <script src="./dist/messages.js"></script>
    <script src="./dist/hello-world.js"></script>
  </head>
  <body>

    <button onclick="helloWorld()">
      hello world
    </button>

  </body>
</html>

Links

webpack video course

Summary

In this article we have seen seen migration to webpack for simple example app. I hope it will help you start modernizing your code-base. If you are interested in seeing the repo I used while working on this it's here:
https://github.com/marcin-wosinek/webpack-legacy

and working example is available here:
https://marcin-wosinek.github.io/webpack-legacy/