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. To add it, require Webpack in your config file and specify it in the plugins array: const webpack = require ( "webpack" ) const path = require ( "path" ) const config = require ( "./package.json" ) This helps minify and uglify your JavaScript module after bundling and it is shipped with the Webpack module. We will talk about my two most utilized plugins. Unlike loaders, each Webpack plugin has a specific usage. Since loaders add flavor to your Webpack usage, plugins do a lot more than optimize it. We include jQuery and our own custom script, which looks something like. A regular and simple HTML page that uses jQuery for its functionalities, like changing the color of a text in a paragraph, looks more like: Simple Webpack Trial I am a text This helps optimize load time and makes you more in control as you can choose to include only what you need when you need it.Įnough talk, let’s go over to a sample code and try out Webpack.
Instead, one file is requested, which in some cases, includes your JavaScript bundle and CSS style. This way, when the client makes a request to your server, it doesn’t have to make multiple requests for static files. Module bundlers are just what they are called, they bundle up JavaScript modules into one file. In the wake of React-Facebook’s UI library-came Webpack, a simple but awesome module bundler.