What's New in Webpack 4

Introduction

Webpack is a static module bundler for modern JavaScript applications. It helps to bundle all of the different modules and packages them into one or more bundles.

This week, Webpack 4 was released, offering new features and improvements. This article explores the new features and improvements in Webpack 4.

To get started with webpack 4, install in your project using npm:

npm install webpack webpack-cli --save-dev

You can also install it with Yarn:

yarn add webpack webpack-cli --dev

Node.js Support

Webpack 4 drops support for Node.js 4. This decision was made so as to take advantage of the modern ES6 syntax which results in a more cleaner and stable codebase.

It’s important to note that projects using older versions of Webpack might have reduced performance as modern JavaScript syntax is now in use.

Increased Build Speed

Using Webpack 4 now guarantees you up to a 98% decrease in build time for your projects thanks to performance improvements.

The following images show the build time for a project using Webpack 3 and Webpack 4, respectively:

Webpack 3 built the project in 1350 milliseconds. Webpack 4 built the project in 865 milliseconds:

The Mode Property

Webpack 4 ships with a property called mode which allows you to set which environment you’re working on: development or production. Each option has its own advantages and usage.

Setting the mode to development allows you to focus on building by giving you the best development experience with features like:

• Tooling for browser debugging.
• Comments, detailed error messages and hints for development are enabled.
• Fast and optimized incremental rebuilds.

Setting mode to production offers you the best option and defaults needed for deploying your project such as:

• Optimizations to generate optimized bundles.
• Module concatenating (Scope Hoisting).
• Smaller output size.
• Exclusion of development-only code.

webpack will always throw an error if the mode has not been set as seen in the following figure:

You can set your mode in the webpack.config.js file to either development or production.

module.exports = {
	mode: 'development'
}

or

module.exports = {
	mode: 'production'
}

The mode property also accepts none instead of development or production if you’d like to do away with the error thrown by Wepback and disable everything.

Plugins and Optimizations

The CommonsChunkPlugin was removed in Webpack 4 and has been replaced with a set of defaults and API called optimization.splitChunks and optimization.runtimeChunk. This means you now get to have shared chunks automatically generated for you. Some other plugins were also deprecated in version 4.

• NoEmitOnErrorsPlugin was deprecated and is now optimization.noEmitOnErrors. It’s set to on by default in production mode
• ModuleConcatenationPlugin was deprecated and is now optimization.concatenateModules. It’s set to on by default in production mode
• NamedModulesPlugin was deprecated and is now optimization.namedModules. It’s set to on by default in production mode

In a bid to improve performance and get the best optimizes, UglifyJs now caches and parallizes by default in webpack 4.

New Module Types

Webpack now supports these module types:

• javascript/auto: (The default in webpack 3) Javascript module with all module systems enabled: CommonJS, AMD, ESM
• javascript/esm: EcmaScript modules, all other module system are not available
• javascript/dynamic: Only CommonJS and, EcmaScript modules are not available
• json: JSON data, it’s available via require and import
• webassembly/experimental: WebAssembly modules (currently experimental)

javascript/auto used to be the default module in Webpack 3, but Webpack 4 completely abstracted the JavaScript specificity from the code base to allow for this change so that users can specify the kind of module they want.

Also, Webpack will look for the .wasm, .mjs, .js and .json extensions in this order.

0CJS

0CJS means a Zero Config app. It’s the idea that you need the minimum or zero config to get a JavaScript project up and running. That’s the premise the relatively new bundler, Parcel also runs on. You don’t need a configuration file to get started building your app.

With version 4, Webpack no longer requires a webpack.config.js file.

All you need to do is have a ./src/index.js file. Whenever you run the webpack command in the terminal, Webpack knows to use that file as the entry point for the application. This might come in handy for small projects.

Other Updates

• Dead branches are now removed by Webpack itself. This was done by Uglify before but Webpack is responsible for removing dead code now.
• import() now supports webpackInclude and webpackExclude as a magic comment. This allows filtering files when using a dynamic expression.
• Using System.import() in your code now emits a gentle warning. import() is advised.
• UglifyJs now caches and runs in parallel by default.
• script tags no longer use text/javascript and async as this are the default values. This saves a few bytes.

Conclusion

These are just some of the many features that are in webpack 4. There are still so many updates and improvement to look forward to such as:

• HTML/CSS modules. This means you can use an HTML/CSS file as an entry point.
• Persistent Caching.
• Multi-threading and Multicore.
• Move WebAssembly support from experimental to stable.

You can check out the full release log for webpack 4 here.