Webpack supports two standards for Module configuration: EcmaScript and CommonJS.
Code in other files can then import this module in order to use it.
A JavaScript Module is a single JavaScript file that exports pieces of functionality for use in other parts of the code. In order for Webpack to work its magic, your code needs to be written as JavaScript Modules. Webpack uses the dependency logic built into your code. Gulp’s dependency resolution capability is limited and requires you to explicitly define your dependency chain. There’s no need to tell Webpack the order in which it should put your files together it figures it out by reading your code. When it’s all done, Webpack emits your JavaScript in a single bundle file. You specify a file that serves as your application’s entry point, and Webpack will recursively process module imports in your code to build a dependency graph. As you add more files and your dependency tree grows, this can become a chore to maintain.Ĭomplex dependency resolution is Webpack’s specialty. This can be done directly in the Gulp configuration, or by maintaining a separate manifest file for use with a plugin like asset-builder. If code in file A depends on code in file B, you need to tell Gulp to include file A first. However, when it comes to packaging your JavaScript application, the previously-mentioned file smashing is about as far as it can go. It allows developers to set up complex file processing pipelines using JavaScript, and run them as simple commands. Maybe you’ve heard this before: Gulp is a task runner, Webpack is a module bundler. Webpack helps you write better code and gets out of your way so you can focus on making great software. If you’re already comfortable using a task runner like Gulp, delegating the asset bundling to Webpack will provide you with a more sophisticated organization and dependency management strategy. If you’ve never used a build tool for your frontend assets, Webpack is a great place to start.
This post will explore why Webpack is the right choice for bundling your JavaScript application. This is a great improvement - but is it really enough? We’re left with a linear dependency chain and relying on global variables to share information between our separate files. Many solutions in this space, such as Gulp, can be used to smash a bunch of JavaScript files together into a single bundle. On top of that, best practices dictate that all of your code should be served up in a single file. You already know that a well-organized codebase is easier to understand and maintain, but that can be difficult to accomplish when you’re just throwing a bunch of files in tags. Writing complex client-side code is painful without some help. A good tool shouldn’t get in your way! The Problem Reducing cognitive overhead is a core component of Forestry.io’s philosophy - we designed a static site CMS that is easy to set up and use.
Attempting to learn and keep up with these tools takes time and energy that you would rather devote to your project. There exists an abundance of tools and frameworks, and each one wants to rescue you from the shortcomings of its peers.