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:
$ mkdir sample-project
$ mkdir sample-project/src
$ cd sample-project
Create an index.js
file in the sample-project
root directory and simply add some simple code:
// index.js
console.log("This is our test file, webpack is supposed to see this")
Next, create a package.json
file and in there paste the following:
{
"name": "sample-project",
"version": "0.0.1"
}
Then go ahead to install Webpack using NPM:
$ npm install webpack webpack-cli --save-dev
Next, open the package.json
and set up your scripts to build:
{
[...]
"scripts": {
"build": "webpack"
}
[...]
}
Now we build with the following command:
$ npm run build
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 nowoptimization.noEmitOnErrors
and it’s invoked by default in production mode.ModuleConcatenationPlugin
. This is nowoptimization.concatenateModules
and it’s invoked by default in production mode.NamedModulesPlugin
. This is nowoptimization.namedModules
and it’s invoked by default in production mode.CommonChunkPlugin
has been replaced byoptimization.splitChunks
andoptimization.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:
// the json file - country.json
{
"usd": "United States",
"alg": "Algeria",
"others": "Yea other states here"
}
Can be imported directly in an ES6 styled manner like so:
import countries from './country.json'
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
andrequire
. - javascript/dynamic: supports only
CommonJS
andAMD
. - 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.
May 10, 2018
Ready to begin?
Start building your realtime experience today.
From in-app chat to realtime graphs and location tracking, you can rely on Pusher to scale to million of users and trillions of messages