Tutorial

What's New in Webpack 4

Updated on April 4, 2022
Default avatar

By Yomi Eluwande

What's New in Webpack 4

This tutorial is out of date and no longer maintained.

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:

  1. npm install webpack webpack-cli --save-dev

You can also install it with Yarn:

  1. 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 project builds in 1530ms

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

Webpack 4 project builds in 865ms

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:

Error when environment isn't set

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

webpack.config.js
module.exports = {
	mode: 'development'
}

or

webpack.config.js

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.

Thanks for learning with the DigitalOcean Community. Check out our offerings for compute, storage, networking, and managed databases.

Learn more about us


About the authors
Default avatar
Yomi Eluwande

author



Still looking for an answer?

Ask a questionSearch for more help

Was this helpful?
 
Leave a comment


This textbox defaults to using Markdown to format your answer.

You can type !ref in this text area to quickly search our full set of tutorials, documentation & marketplace offerings and insert the link!

Try DigitalOcean for free

Click below to sign up and get $200 of credit to try our products over 60 days!

Sign up

Join the Tech Talk
Success! Thank you! Please check your email for further details.

Please complete your information!

Get our biweekly newsletter

Sign up for Infrastructure as a Newsletter.

Hollie's Hub for Good

Working on improving health and education, reducing inequality, and spurring economic growth? We'd like to help.

Become a contributor

Get paid to write technical tutorials and select a tech-focused charity to receive a matching donation.

Welcome to the developer cloud

DigitalOcean makes it simple to launch in the cloud and scale up as you grow — whether you're running one virtual machine or ten thousand.

Learn more
DigitalOcean Cloud Control Panel