Bundling WebAssembly Modules with webpack
Learn how webpack enables the bundling of WebAssembly modules using loaders, plugins, and Hot Module Replacement for automatic reloading during web development.
The power of loaders and plugins
webpack is a static module bundler for modern JavaScript applications. So, what does it do? We can consider webpack as an informal compiler for the frontend. webpack takes in an entry point of an application, slowly runs through the modules, and builds a dependency graph.
The dependency graph holds all the modules. These modules are necessary for the application to run. Once the dependency graph is built, webpack outputs one or more bundles. webpack is very flexible, helping us to bundle or package JavaScript as we need it, and the options are provided in the webpack configuration. Based on the provided options, webpack creates the output. Well, that sounds simple, right? It was that simple a few years ago when the only library that we needed was jQuery.
But due to JavaScript’s rapid evolution, there are a lot of different things happening now. The underlying runtime is not the same. There are three different browser engines and various targets. Browser engines evolve at different speeds and browsers support various versions of JavaScript.
In some workplace machines, upgrading browsers to the latest version is prohibited. This means that the running JavaScript application needs tweaking and polyfills at various times. The underlying target system needs a certain tweak to make your JavaScript code run. Doing all this by hand will take a long time to complete and will be error-prone.
There are various flavors of JavaScript, including TypeScript and CoffeeScript. They’re different, but they will compile down to JavaScript before running. Browser-based development needs CSS, SCSS, SASS, and LESS. Supporting all these variations and compiling them manually after every change is not an easy task.
JavaScript’s answer to all this is bundlers. Whether you hate them or love them, bundlers reduce overload and remove clutter when developing with JavaScript. webpack provides a solution to all these problems and more. webpack is a tool built for bundling JavaScript applications.
webpack comes with loaders and plugins that will help to convert, add, remove, and manipulate the output bundles. The most interesting part of webpack is its loaders and plugins, which propel the ability of webpack to the ...