

You will also need Node installed on your local machine, so you can install and use webpack locally. Note: To benefit from this article, it’s a good idea to be familiar with JavaScript modules. In this article, we will be focusing on webpack, a tool written by Tobias Koppers, which over time has grown to become a major tool within the JavaScript toolchain, often used in large and small projects. The bundle mentioned here can be understood better as the end product of the entire bundling process. What Does It Mean To “Bundle” Your Code?īundling code refers to combining and optimizing multiple modules into one or more production-ready bundles. To solve this problem, module bundlers such as webpack, Parcel, Rollup and also Google’s Closure Compiler were written to create optimized bundles of your code for your end-user’s browser to download and execute. But there was still a challenge: modules couldn’t be used within web browsers, where JavaScript was usually executed. It also had prospects for large web applications as developers could avoid namespace collisions and build a more maintainable codebases by writing code in a more modular pattern.

Support for modular programming was being implemented in Node.js using the CommonJS blueprint and it was being adopted by those using JavaScript for building server-side applications.

In the early days when modularity was introduced in JavaScript, there was no native support for running modules within the browser.
Node js bundle files how to#
Let’s take a deep dive into what webpack is and how to use it in your development workflow. Modern browsers provide good support for JavaScript modules, but module bundlers such as webpack stay a critical part of the JavaScript toolchain.
