Migrating to Webpack 4 today

Today, I made a switch to Webpack 4 from version 3 for a project I am working
on. And my first impression?** Its definitely fast!**

The change brought down my build time from 13s to 7s, which is more than 40%
reduction.

In the process, I did have some hiccups which I would be discussing below.
Before getting to it, let me just go over the new additions to webpack in
version 4 that actually matters.

1. Speed — The entire webpack community has been drooling over this. Version
4 drastically reduces the build time for any kind of projects.

If you are already excited, don’t wait. Here is what you need to do.😁

yarn add webpack webpack-cli --dev

2. Zero Configuration — Webpack now comes with defaults for entry and
output, which helps in using the bundler with no config file.

The default entry point is ./src/index.js. Create a file there and you are
ready to go. The output files are emitted to ./dist.

3. Modes —Introduced to improve the default bundle outputs. There are two
types of modes (development and production) which can be passed as props when
running webpack.

The development mode is optimized for build time where as the production mode
optimizes the output bundles.

The webpack 4 also has support for WebAssembly and Module Types

Without further due, here are the steps I followed for migration.

Upgrading the version

You need to upgrade the webpack version using the package manager of your
choice.

yarn add webpack webpack-cli --dev

If you already have a lock file, you need to use yarn upgrade to update
the version.

In case you are wondering why webpack-cli package is required, v3 adds this
package automatically. With version 4, the cli is a separate package which you
can install manually. It is responsible for adding the command line support for
webpack.

Mode

As I mentioned earlier, from version 4, it is necessary to specify the mode
explicitly for running webpack. Otherwise you would end up with this.

Specify the mode as production or development for the scripts that run webpack
in your package.json file.

Alternatively, you can specify the same in your webpack config file by setting
the mode option.

webpack --mode development / webpack --mode production

There is a ‘none’ mode as well just in case you don’t want to use the default
configurations.

Plugins

— The html-webpack-plugin that you are using(most probably) isn’t compatible
with version 4.

The plugin developers have already added support and so you can pull in the same
from NPM. The latest version at the time of writing this post (version 3.1.0)
works like a charm.

— extract-text-webpack-plugin? Sorry to say, I was not able to get it to
work with webpack 4.

Fortunately, there is mini-css-extract-plugin which is maintained by the
Webpack team that can help you extract CSS to a separate file(s).

yarn add -D mini-css-extract-plugin

With these changes, I was able to spin up the development server and everything
worked well.

Great. Let me check the production build. What could go wrong with it after all?

And then I get this.

🙄

The UglifyJsPlugin for production builds had to be moved from plugins to
optimization in the config. Here is how I refactored it:

Quick note:

In case you are using the CommonsChunkPlugin plugin, it has been deprecated.
But, there is a built-in replacement in Webpack 4.

You can use the optimization.splitChunks API to generate shared chunks. And
it is also enabled by default. It allows you to specify configurations if you
have multiple endpoints in your application.

Yay, I was finally able to move my project to Webpack 4.🙌

The future ?

This release of webpack is just a step towards a much better and faster bundler.
Things like multi-threading, persistent caching, HTML entry points etc are
coming in version 5
of webpack.

What is in it for us? Just focus on your application logic ✌️ and let webpack
sweat it.😉