Webpack looks like a quite intimidating system, but having played around with them, they are very simple. In this article we will be creating our own loader from scratch and adding them to our webpack configuration.
The core concept is a loader is basically a function that maps input to output. Loaders have the requirement is being written in the commonjs format, meaning you work with module.exports
and require
. An basic example:
module.exports = function stringReplacingLoader(input) {
return input.replace("World", "Earth");
}
If you read this quickly after publication, the chance is high you are on my newly build website. There are multiple techniques used on this website to archive my goals. Doing this mix with a static website vs easy to add content was quite the technical challenge, but looking at this website shows I succeeded in my goals.