Tutorial
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 nowoptimization.noEmitOnErrors
. It’s set to on by default in production modeModuleConcatenationPlugin
was deprecated and is nowoptimization.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 supportswebpackInclude
andwebpackExclude
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
andasync
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.