Webpack

Webpack remains one of the, if not the most, widely used bundlers. The team behind it is continually fixing bugs and adding new features, which are released in major version updates. Despite the emergence of new bundlers in recent years, we still recommend using Webpack.

In the last few years, Webpack has grown to become the de-facto standard for Web bundling in the JavaScript-Ecosystem. With Version 3, Webpack is a more robust and better documented bundler with nice new features such as scope hoisting. Because of this, and because of the continuously growing community, we have adopted Webpack for nearly every single-page application we have.

Webpack is a web bundler for JavaScript applications. Instead of writing scripts to build and bundle your app like you would with Gulp, you just define what files you want to load into your bundle.

In the following example, we define that JavaScript files should be handled by babel-loader, excluding the files from node_modules. The logic behind the process comes from the loader. You can find the right loader in npm.

{
    test: /\.js$/,
    loader: 'babel-loader',
    exclude: /node_modules/,
}

On top of that you can use plugins to optimize your bundle like uglifying your code or put your common libraries in a separate file.

Under the hood, you've got nice features such as:

• tree shaking to just bundle the features from a library you need
• chunk splitting to split your code to manage the load prioritization

The configuration is simple and there is excellent and extensive documentation.