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.
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
index.js file in the
sample-project root directory and simply add some simple code:
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:
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:
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:
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
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:
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",
"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
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
- 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
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.