Fundamentals of Cross-Platform Development (II)

Build-time code branching

In this section, we’re going to see how to use webpack plugins to remove all parts of the code (that we want to run only on the server) at build time. This allows us to obtain lighter bundle files and to avoid accidentally exposing code containing sensible information (for instance, secrets, passwords, or API keys) that should only live on the server.

Webpack offers support for plugins, which allows us to extend webpack’s capabilities and add new processing steps that can be used to produce the bundle file. To perform build-time code branching, we can leverage a built-in plugin called DefinePlugin and a third-party plugin called terser-webpack-plugin.

DefinePlugin can be used to replace specific code occurrences in our source files with custom code or variables. terser-webpack-plugin allows us to compress the resulting code and remove unreachable statements (dead code elimination).

Let's start by rewriting our say-hello.js module to explore these concepts.