This content originally appeared on Bits and Pieces - Medium and was authored by Chameera Dulanga
4 strong reasons to start learning Webpack in-depth today
Modern web applications are not just about developing core functionalities. We also should pay attention to factors like application performance, development productivity, and efficiency to get the maximum out of our effort.
But, are you aware that you can use Webpack to address some of these challenges?
However, just knowing how Webpack works won’t be enough to get maximum from it. So, let’s see what you can achieve by being an expert in Webpack.
1. Improve Developer Productivity
As developers, we always like to see faster feedback while we carry out modifications to the code. Besides, there are various methods we follow.
If you know the Webpack well, you can easily enable its Hot Module Replacement feature to improve the development process.
Hot module replacement (HMR) allows us to modify modules while it is in the running state. Since HMR prevents full reload of the application, it will remain in the same state and will only update what is changed.
All you need is to update the webpack-dev-server configuration and use its built-in HMR plugin.
....
module.exports = {
entry: {
app: './src/index.js',
},
...
devServer: {
contentBase: './dist',
hot: true, // <--- Add this line
},
plugins: [
...
new HtmlWebpackPlugin({
title: 'Hot Module Replacement',
}),
],
output: {
...
},
};
Pro tip: HMR becomes very handy in situations where you develop web applications for multiple device form factors. E.g., You can access the development server URL on both desktop and mobile and instantly see how it looks in both.
2. Get Better at Tree-Shaking
If your project has a significant amount of dead code or a large number of shared libraries, it’s common to experience a long application loading time. It is common to see tree-shaking in such situations to avoid dead or unwanted code from bundling.
....
module.exports = {
entry: {
app: './src/index.js',
},
output: {
...
},
//add below line
mode: 'development',
optimization: {
usedExports: true,
},
};
But, how can we guarantee that Webpack makes the correct decision about unused codes in the project?
For example, it's common to have global level stylesheets imported to the project, and usually, those files aren't used anywhere. But removing such files can affect the whole project.
Webpack uses a special configuration in package.json file named sideEffects. By default, all the files in your project are considered files with side effects, and tree shaking won’t be performed.
However, we can manually change this behavior by changing sideEffects value to false, true or providing an array with file names.
// All files have side effects
"sideEffects": true
// No files have side effects
"sideEffects": false
//Only these files have side effects,
"sideEffects": [
"./src/file1.js",
"./src/file2.js"
]
}
If you enable tree-shaking in Webpack configuration, ensure to include files that don’t have side effects in package.json file settings.
Tip: Share components between projects using Bit (Github).
Bit makes it simple to share and reuse independent components between projects. It’s great for maximizing code reuse, keeping a consistent design, speeding-up delivery, and building apps that scale.
Bit supports Node, TypeScript, React, Vue, Angular, and more.
3. Using Code Splitting to Optimize App Loading Time
If you monitor the number of unused bytes in a single bundle using Chrome DevTools, you will be amazed to see how often it happens.
Webpack provides the perfect solution by allowing you to split your code into different bundles and load them on-demand or in parallel.
Webpack provides 3 approaches for code splitting, and you need to decide which mechanism is the most suited one for your project. For that, you should have a good understanding of Webpack.
The entry point approach is considered the most straightforward and most used code-splitting approach with Webpack. You just need to update all the separate modules in the Webpack config file manually.
....
module.exports = {
mode: 'development',
entry: {
index: './src/index.js',
second: './src/second-module.js',
},
output: {
filename: '[name].bundle.js',
path: path.resolve(__dirname, 'dist'),
},
};
However, this approach is not much flexible, and there is a risk of having duplicates modules between chunks. If you don’t see any improvements with this approach, you can go deeper with Prevent Duplication approach.
Prevent Duplication approach allows to specify the shared modules between chunks using dependOn option. You can easily convert the entry point approach to prevent duplication with few modifications.
....
module.exports = {
mode: 'development',
entry: {
index: {
import: './src/index.js',
dependOn: 'shared',
},
second: {
import: './src/second.js',
dependOn: 'shared',
},
shared: 'shared-module',
},
...
};
But, the above configuration alone will not give you the desired output. You also need to enable the runtimeChunk in the optimization section to prevent Webpack from copying module code between entry points.
optimization: {
splitChunks: {
chunks: 'all',
},
},
If you are not satisfied with the Prevent Duplication approach, you can shift to the Dynamic Imports approach.
I think you already understand the power of Webpack code splitting and the amount of knowledge you needed to configure that. So, I won't be going into details of the Dynamic Imports approach here, and you will be able to understand it easily if you understood the previous two.
4. Supports Micro Frontends with Module Federation
Module federation is an exciting JavaScript architecture that allows importing code from another application dynamically at runtime.
Webpack facilitates the support you need to integrate the module federation architecture to your project through a plugin called module Federation Plugin.
All you need to do is to follow the below 4 simple steps:
- Import plugin to both applications.
- Make necessary modifications in the Webpack configuration for the first application and expose the components that need to be shared.
- Import the shared component in the Webpack configurations of the second application.
However, this might not be that simple when you start implementation. You should be very careful about Webpack configurations and only necessary changes.
For example, in the first application, you won’t need to change anything other than the plugins section.
const { ModuleFederationPlugin } = require(“webpack”).container;
...
plugins: [
new ModuleFederationPlugin({
name: "application1",
library: { type: "var", name: "app1" },
filename: "remoteEntry.js",
exposes: {
// expose each component
"./Component1": "./src/components/Component1",
},
shared: ["react", "react-dom"],
}),
...
],
...
Besides, if you have a good understanding of these concepts, you can refer to the relevant documentation and easily carry out the required configurations.
With this approach, you will be able to move away from the traditional way of sharing reusable components between micro frontends, and I think that would be a huge win for your development team.
Conclusion
Frontend development has advanced a lot during the past decade. Today we look at large JavaScript codebases, which need the right tools to structure them properly for development and optimize for runtime.
This is where Webpack elegantly fills the gap by providing the flexibility to structure the JavaScript code along with its dependencies and compile them into the optimized output we want. Besides, Webpack is also successful with its ability to fit with the existing JavaScript ecosystem and work inline with popular libraries and frameworks supporting their requirements.
So, it’s important to accept that Webpack is not just a module bundler but also at the foundation of modern web development.
After going through the article, I think you understand the importance of learning the internals of Webpack and areas you could further seek to excel. So, if you have a good knowledge of Webpack, you can use it confidently, knowing its boundaries.
I hope the article is useful. Thank you for Reading !!!
Learn More
- Upgrading to React 17 and Webpack 5
- Revolutionizing Micro Frontends with Webpack 5, Module Federation and Bit
- Choosing the Right JavaScript Bundler in 2020
Why Frontend Developers Need to be Webpack Experts was originally published in Bits and Pieces on Medium, where people are continuing the conversation by highlighting and responding to this story.
This content originally appeared on Bits and Pieces - Medium and was authored by Chameera Dulanga
Chameera Dulanga | Sciencx (2021-03-01T15:09:31+00:00) Why Frontend Developers Need to be Webpack Experts. Retrieved from https://www.scien.cx/2021/03/01/why-frontend-developers-need-to-be-webpack-experts/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.