What’s new in Webpack 4

Webpack 4 is a module bundler. Its main purpose is to bundle JavaScript files for usage in a browser, yet it is also capable of transforming, bundling, or packaging just about any resource or asset. – Webpack homepage

Webpack 4, codename Legato, was released on the 25th of February, and the new release offers new features while introducing interesting changes. If you need to learn more about Webpack check out this amazing tutorial on it.

In this article, we will cover what Webpack 4 has to offer. We will look at changes made to the existing APIs and new APIs that were made available. You can also take a look directly at the changelog, which is what this article is based on. As at the time of writing this article, Webpack is in version 4.6, so we will consider everything that has changed beginning from version 4.0.

Prerequisites

To follow along in this article, you should be familiar with Webpack and should have used it in a project. Let’s get started.

No support for Node.js 4

In Webpack 4, Node.js 4 is no longer supported. The source code was updated to a higher ECMAScript version that requires a version of Node.js greater than 4. It’s advised that you migrate your code from the Node.js 4 environment. Projects featuring ECMAScript of the lower version may suffer functionality issues.

The recommended version of Node.js to use is >= 8.9.4.

Zero configuration module bundler

Webpack 4 now allows you create projects with zero configuration. This means that you can create a project without specifying an entry point or an output point. Prior to version 4, you would have had to specify an entry point in the webpack.config.js file, but with the new version, Webpack will bundle your application without specifying the entry point.

Let’s see how this could work. First, create a new project using your terminal:

bash
1$ mkdir sample-project
2    $ mkdir sample-project/src
3    $ cd sample-project
Copy

Create an index.js file in the sample-project root directory and simply add some simple code:

javascript
1// index.js
2    console.log("This is our test file, webpack is supposed to see this")
Copy

Next, create a package.json file and in there paste the following:

bash
1{
2        "name": "sample-project",
3        "version": "0.0.1"
4    }
Copy

Then go ahead to install Webpack using NPM:

bash
1$ npm install webpack webpack-cli --save-dev
Copy

Next, open the package.json and set up your scripts to build:

bash
1{
2
3      [...]
4
5      "scripts": {
6        "build": "webpack"
7      }
8
9      [...]
10
11    }
Copy

Now we build with the following command:

bash
1$ npm run build
Copy

Since we did not specify an entry point, Webpack will automatically use the src/index.js file as an entry point and proceed to bundle the file.

The new “Mode” property

In Webpack 4, we have a mode flag. Using this flag we can bundle for different environments. The mode is in essence the environment that you are bundling for. There are three different modes:

• Production
• Development
• None

When bundling for production Webpack optimizes the build. However, in production mode, Webpack will not support automatic file watching.

When bundling for development mode, Webpack will:

• Show hints for development and also enable the eval devtool.
• Implement incremental builds so the code is quickly rebuilt during development.

In the third mode none, everything is disabled.

If there is no mode set, Webpack will fallback to production mode (see the warning in the previous screenshot).

New optimization plugins

Prior to Webpack 4, we had to explicitly specify the extra plugins we intend to use with our module bundler, but many of these plugins were commonly used and had to be added over and over again per project, so based on feature requests, commonly used configurations are part of Webpack.

Some plugins like this:

• NoEmitOnErrorsPlugin. This is now optimization.noEmitOnErrors and it’s invoked by default in production mode.
• ModuleConcatenationPlugin. This is now optimization.concatenateModules and it’s invoked by default in production mode.
• NamedModulesPlugin. This is now optimization.namedModules and it’s invoked by default in production mode.
• CommonChunkPlugin has been replaced by optimization.splitChunks and optimization.runtimeChunk.

Everything optimization related has been moved to the optimization object. So when you are building for production, many of the cool optimizations are applied.

Even more optimizations for production

Aside from what’s been mentioned earlier on optimization, there are some extra additions to optimizations, for example, the Uglify plugin is now applied automatically when building in production mode. Some other optimizations are:

• Dead code removal – dead code is now eliminated from the bundled files. Dead code is basically sections of code not used at all in the project.
• Bundle splitting – bundled files are now split into smaller chunks, which are executed separately. This can increase the efficiency and speed of the project.

Native support for JSON

Prior to Webpack 4, it was tricky importing JSON directly into a code section because Webpack couldn’t parse JSON natively. Well, Webpack 4 now handles JSON natively. This means files such as this:

bash
1// the json file - country.json
2    {
3       "usd": "United States",
4       "alg": "Algeria",
5       "others": "Yea other states here"  
6    }
Copy

Can be imported directly in an ES6 styled manner like so:

bash
1import countries from './country.json'
Copy

You may also need to add type: "javascript/auto" when transforming JSON from the loader to JavaScript, but importing and using JSON without a loader will still work.

Support for more module types

Webpack now supports a wider variety of modules out of the box, Webpack officially provides support for the following modules, using their configuration settings:

• json: supports only JSON data via import and require.
• javascript/dynamic: supports only CommonJS and AMD.
• javascript/auto: JavaScript module with all module systems enabled, Commonjs, AMD, ESM.
• javascript/esm: EcmaScript module supported only.
• webassembly/experimental: modules can import other modules, also, exports from WebAssembly modules are validated by ESM import. Note though that this is still an experimental feature and is subject to change.

Faster build times

Webpack version 4 is as fast as the Flash, okay maybe not that fast but its faster than previous versions of Webpack.

The stats above show that bundling with Webpack 3 for the project took about 36801ms while it took Webpack 4 only 9632ms. That’s almost a 4x improvement in build time!

Extra detailed stats

With Webpack 4, the stats option has been updated to display more information about your project. Webpack 4 allows you have granular control over how you handle stats, you can even specify exactly what you want to see and what you don’t want to see.

You can learn more about stats here.

Conclusion

Webpack 4 comes with a lot of new features, which improves bundling assets. It’s made quite a few updates from the previous versions of Webpack.

Webpack still continues to be improved by the community. As seen it took only a few months to go from version 4.0 to version 4.6.