The LotusFlare Front-End Engineering team thrives on a constant stream of challenging and exhilarating projects. To successfully deliver the “next project”, the team employs their expertise in diverse areas and their experience from previous deployments.
Most LotusFlare engineering projects today involve building complex web applications consuming modern JavaScript frameworks. Webpack module bundlers are utilized by LotusFlare teams to optimize and streamline the frontend development process, acting as effective tools to develop complex web applications. The result: LotusFlare engineering teams are able to deliver an improved user experience, usually one of the primary deliverables in the valuable business outcomes LotusFlare delivers to its customers.
In this tech blog, LotusFlare Software Engineer Sergiii generously shares its expertise and insights on the Webpack module bundler derived from numerous engineering projects that utilized this tool.
Even though the default Webpack configuration may be predefined and hidden by a framework, it is still essential for front-end engineers to understand how Webpack works to deliver valuable business outcomes to our customers. LotusFlare Engineering team uncovered a few reasons why it is important from their perspective and personal experience:
- Debugging: When building complex applications, you may encounter issues that require troubleshooting at the Webpack configuration level. Understanding how Webpack works will help you identify and fix these issues more effectively.
- Customization: While the default Webpack configuration provided by JavaScript frameworks may work well for many use cases, there may be situations where you need to customize the configuration to meet specific requirements or optimize performance. In such cases, having a basic understanding of how Webpack works will allow you to make these changes confidently.
- Third-party libraries and plugins: many third-party libraries and plugins rely on Webpack bundling and require some level of Webpack configuration to work properly. By understanding how Webpack works, you will be better equipped to integrate these tools into your application.
- Performance optimization: Webpack is a powerful tool for optimizing the performance of web applications. By understanding the basics of how Webpack works, you will be able to take advantage of its features to improve the speed and user experience of your applications.
Overall, even if you use a modern JavaScript framework that abstracts away some of the complexity of Webpack, having a basic understanding of how Webpack works will make you a more effective front-end engineer and enable you to build better web applications.
How does the need for the JS module bundler occur?
Initially, JavaScript programs were relatively small and primarily used for simple scripting tasks that added a little interactivity to web pages. As a result, extensive scripts were not typically necessary. However, as time progressed, complete applications began to be executed in browsers, and JavaScript found use in other areas such as Node.js.
Given this development, there has been a growing need in recent years to find ways to separate JavaScript programs into individual modules that can be imported as required. This capability has long been available in Node.js. Various JavaScript libraries and frameworks have been developed to facilitate module usages, such as CommonJS and AMD-based module systems like RequireJS, as well as tools like Webpack and Babel.
What is Webpack?
Webpack is a module bundler that takes modules with dependencies and generates static assets, such as JavaScript files, ready to be executed in a browser. It can also bundle other assets, such as stylesheets, images, and fonts. Essentially, it combines all the different pieces of an application into one or more optimized bundles that a web browser can load.
Webpack operates on the principle of a dependency graph, a visual representation of the various dependencies in a project. Webpack uses this graph to determine how modules should be processed and combined into bundles.
A brief history of Webpack
Webpack has been rapidly evolving since its initial release in 2012. Initially, Webpack was created by Tobias Koppers as a solution for bundling JavaScript modules for use in web applications. Over time, Webpack has grown in popularity and has become a key tool in modern web development.
In 2014, Webpack 2 was released, which included new features such as code splitting and tree shaking, making it possible to optimize the size of the resulting bundle.
In 2017, Webpack 3 was released, which included a new scope hoisting feature that allowed for further optimizations by reducing the number of functions needed in the final bundle.
Webpack 4, released in 2018, was a major update that introduced a new mode system that allowed developers to choose between development and production modes. This version also included enhancements to the built-in development server and made using Webpack with other build tools easier.
In 2020, Webpack 5 was released, which included improvements such as better support for module federation, improved caching and performance, and enhanced TypeScript support. This version also removed some of the older, deprecated features of Webpack, making it a leaner and more efficient tool.
Webpack core concepts
To understand how Webpack works, it’s essential to be familiar with its core concepts.
Entry
The entry point is the starting point of the application where Webpack will begin to build the dependency graph. It defines which modules are included in the bundle and sets the stage for the rest of the bundling process.
Output
The output defines where Webpack will output the bundled code. This can include specifying the file name and location, as well as any additional settings needed for the bundle to function properly.
Loaders
Loaders are used to transform different types of files, such as CSS or images, into modules that can be used in an application. They can also be used to preprocess files, such as compiling TypeScript or Sass, before they are included in the bundle.
Plugins
Plugins are used to perform more complex optimizations or to add new functionality to the bundling process. They can be used for tasks such as code splitting, compression, or generating a manifest file for the bundle.
Mode
The mode option allows developers to specify whether they want Webpack to optimize the bundle for development or production. This can include settings such as enabling source maps, minification, or other optimizations.
Browser Compatibility
Webpack provides various tools to ensure compatibility with different browsers. It includes features like polyfills, which enable modern syntax to be used in older browsers, and can also be configured to use different output formats to support older browsers.
Advantages of Using Webpack
One of the main advantages of using Webpack is that it helps optimize the performance of web applications. By bundling all the necessary assets into optimized bundles, it reduces the number of HTTP requests required to load a page, which can significantly improve the loading time of a website.
Webpack also offers a lot of flexibility in terms of how it can be configured and customized. This allows developers to tailor it to the specific needs of their project, such as by adding or removing plugins or loaders as required.
Micro-frontends with Webpack Module Federation
Micro-frontends have become an increasingly popular approach to building modern web applications, as they offer a way to break down large, monolithic frontends into smaller, more manageable pieces. However, one of the key challenges with micro frontends is managing the communication between them.
Webpack 5 Module Federation allows for the sharing of code and state between micro frontends in a decentralized and dynamic way.
“Remote entry point” is the concept behind Webpack Module Federation. Each micro frontend is considered a remote entry point, exposing a set of modules that other micro frontends can use. To use a remote entry point in a Webpack project, developers need to add it to their configuration file and import the modules they need.
Webpack Module Federation supports shared modules. This allows for sharing code between multiple remote entry points, reducing duplication and improving performance. Additionally, Module Federation includes support for the dynamic loading of modules, allowing modules to be loaded at runtime based on user interactions or other events.
The decentralized nature of the micro-frontend architecture means that individual micro frontends can be developed and deployed independently of each other, making it easier to manage complex applications with multiple teams.
The dynamic nature of Module Federation means that micro frontends can be added or removed from the application without requiring a complete rebuild or redeployment of the entire application. This allows for more flexible and agile development, as developers can change individual micro frontends without disrupting the rest of the application.
Getting Started with Webpack
To get started with Webpack, you first need to install it. Let’s create a small example project for this purpose.
- Create a new directory for your project and navigate into it.
mkdir my-webpack-project
cd my-webpack-project2. Initialize a new Node.js project with npm.
npm init -y3. Install webpack and webpack-cli as development dependencies.
npm install webpack webpack-cli --save-dev4. Create a new file called index.js in the root of your project and add the following code to it.
console.log('Hello, World!');5. Create a new file called webpack.config.js in the root of your project and add the following code to it.
const path = require('path');
module.exports = {
mode: process.env.APP_ENV || 'production',
entry: './index.js',
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist'),
},
};
6. Add a new script to your package.json file to run Webpack.
"scripts": {
"build": "webpack"
},
7. Run the build script to bundle your code.
npm run build8. A new dist directory will be created in your project’s root directory, and a file called bundle.js will be generated inside it. This is your bundled JavaScript code that you can use in your web application.
Congratulations, you’ve just created the “hello-world” project with Webpack. This is a basic example that should give you an idea of how Webpack works and how you can use it to bundle your JavaScript code.
Conclusion
Webpack is a flexible module bundler that can help improve the performance and organization of modern web applications. Providing a dependency graph and a wide range of plugins and loaders, it enables developers to easily manage and optimize the various assets that make up their projects.
Resources
https://webpack.js.org/concepts/
