webpack Configuration FilesĪpart from using the webpack-cli from a terminal, you can also use webpack in your project via a configuration file.
If not installed, you will be prompted from your terminal to install it. Note: You will also need webpack-cli installed to use webpack on your machine. Once we’ve understood what webpack is and what terminology it uses, let’s see how they apply in putting together a configuration file for a demo project. Recommended reading: Webpack - A Detailed Introduction As you read further down the article, you will see how we use loaders to work with different asset types.
These files could be anything from images to fonts or even video files. It refers to the static files bundled during the build process.
The term assets is frequently used within webpack and other bundlers in general. Webpack supports modules created using the ES6, CommonJS and AMD syntax. Modules are broken-down parts of your application which you import to perform a specific task or function. Chunks are commonly used when performing code-splitting with webpack.
This code will be stored in a chunk file. This terminology is often used in this article, and it’s also frequently referenced in webpack’s documentation.Ī chunk refers to the code extracted from modules. To understand how webpack works, we need to understand some terminology that it uses (check webpack Glossary. An illustration of depedency graph graph generated by webpack starting from an entry point.
With its extensible nature, you can plug in external loaders and plugins to achieve your end goal.Īs shown in the illustration below, webpack goes through your application from a root entry point, builds a dependency graph comprising of dependencies that act directly or indirectly on the root file and produces optimized bundles of the combined modules. Webpack is a highly extensible and configurable static module bundler for JavaScript applications. 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.
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.