Webpack 4.0 Release: What's New?

TL;DR: On Sunday, February 25, 2018, Webpack 4.0, was released to the public. Legato(Weboack 4.0's codename) is a major release to the JavaScript module bundler. It has taken about eight months since the release of 3.0. In this article, I'll cover the new features in Webpack 4.0 and several other changes and deprecations.

Webpack is a capable module bundler for JavaScript applications. It bundles every one of the modules in your application into at least one file (frequently, only one) and serves it to the browser. In any case, Webpack is something beyond a module bundler. With the assistance of loaders and plugins, it can change, minify and optimize a wide range of files before serving them as a bundle to the browser. It takes in different resources, for example, JavaScript, CSS, Fonts, Images, and HTML, and afterwards changes these assets into a configuration that is helpful to use through a browser. The genuine energy of Webpack is the whole of its parts.

The creator of Webpack, Tobias, warns users to use Node >= 8.9.4 for optimal performance because of newer JavaScript features now used in the codebase.

2. Farewell CommonsChunkPlugin, Hello SplitChunksPlugin

It's sad to see you go, dear CommonsChunkPlugin. The infamous CommonsChunkPlugin has been removed and replaced with two new smooth APIs called optimize.splitChunks and optimization.runtimeChunk. Let me explain!

Webpack 4 shipped with huge improvements to the chunk graph and a new optimization technique for chunk splitting. A new plugin was born in the process of improvements called SplitChunksPlugin. The SplitChunksPlugin automatically identifies modules which should be split by heuristics and splits the chunks. And it has some other great features such as working efficiently on async chunks, and handling vendor splitting with multiple vendor chunks.

By default, shared chunks will be automatically generated for you out of the box in Webpack 4. And it is configurable via optimize.splitChunks. The optimization.runtimeChunk: true option adds an additional chunk to each entry point containing only the runtime.

3. WebAssembly Support Out of the Box

WebAssembly (wasm) is a new portable, and load-time-efficient format suitable for compilation to the web. It's really fast and the developer community is embracing it rapidly. For this reason, Webpack 4 now supports WebAssembly out of the box. In Webpack 4, you can import and export any local WebAssembly module. And you can write loaders that allow you to import C++, C and Rust directly.

Note: The WebAssembly modules can only be used in async chunks.

4. Support for various Module Types

Webpack 4 now supports five module types. These module types are:

javascript/auto: Webpack 3 shipped with support for this module type with all module systems enabled, CommonJS, AMD, ESM.

javascript/esm: Supports only ECMAScript modules.

javascript/dynamic: Supports only CommonJS and AMD.

json: Supports only JSON data, It's available via require and import.

webassembly/experimental: Supports only WebAssembly modules. For now, it is currently experimental.

5. Lighting the Fire with Mode

I am more excited about this feature than everyone in the universe at the moment. The Webpack team has introduced a new config property called mode all in the quest to achieve a zero-config (#0CJS) module bundler. The mode option can be set to either of these two values; development or production. Out of the box, it defaults to production.

The production option provides a set of sensible defaults that allows for:

Small output size.

Fast code at runtime.

Omitting development-only code.

Not exposing source code or file paths.

Easy to use output assets.

The development option provides a set of sensible defaults that allows for:

Note: Without the mode option in your Webpack config, a warning will be thrown at you.

6. Zero Config Module Bundler #OCJS

Before now, an entry point had to be defined inside a webpack.config.js file for Webpack to bundle your app. However, with Webpack 4, there is no need to define the entry point, it will take ./src/index.js as the default.

Furthermore, there's also no need to define the output file, it emits the bundle to /.dist/main.js.

Deprecations and Other Updates

These plugins have been deprecated, NoEmitOnErrorsPlugin, ModuleConcatenationPlugin, NamedModulesPlugin. You can now use optimization.noEmitOnErrors, optimization.concatenateModules, and optimization.namedModules respectively.

import() always returns a namespace object.

Webpack now removes dead branches by default.

The use of System.import() now emits a warning.

webpackInclude and webpackExclude are supported by the magic comment for import(). They allow to filter files when using a dynamic expression.

Road to Webpack 5

There are several plans underway for Webpack 5. Some of these plans include:

Stable WebAssembly support.

The ability to create a custom module type and have Webpack support it.

Eliminating ExtractTextWebpackPlugin and supporting a CSS module type out of the box.

Supporting HTML module type out of the box.

Persistent Caching

Aside: Webpack and JavaScript at Auth0

At Auth0 we use JavaScript heavily in development and automate tasks using build tools such as Webpack. Using our authentication and authorization server from your JavaScript web apps is a piece of cake.

Go ahead and check out our quickstarts for how to implement authentication using different languages and frameworks in your apps.

Conclusion

You have now learned the new additions to Webpack. Webpack 4.0 shipped with a lot of new features and improvements. The Webpack team is close to having a complete migration and additions guide to Webpack 4. In the upcoming weeks and months, they'll be out. New to Webpack? I wrote a gentle introduction to the module bundler. Sean Larkin also has some awesome Webpack courses on Webpack Academy.

Have you started working with Webpack 4 yet? What are your thoughts? Let me know in the comments section! 😊