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
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/
Top comments (0)