Profile ImageDaniel Bischoff
tagged in JavaScript • Mar 4, 20183 min read

Migrate from webpack 3 to webpack 4

Because there is much confusion about how to upgrade an application from webpack 3 to webpack 4, I want to share with you how I migrated my react-mobx-starter application from webpack 3 to webpack 4.

First, I will show you which plugins I upgraded and after that, how I updated my webpack config files.

As documentation currently does not exist, this article might have some errors or missing information. The articles, where I got the information from, are linked at the end of the article.
Also keep in mind, that after upgrading some plugins and loaders might not work.

Upgrade dependencies

This section shows the dependencies I needed to upgrade, to make my project work with webpack 4. So the most obvious and important things first:

  • webpack
  • webpack-dev-server

And because they moved the webpack cli to its own bundle, you have to install the webpack-cli separately.

  • webpack-cli
yarn upgrade webpack@latest webpack-dev-server@latest

After upgrading webpack, we have to upgrade some webpack plugins and loaders. That is, because some apis have changed and the older versions are now incompatible with the new apis.

  • html-webpack-plugin
  • extract-text-webpack-plugin
yarn upgrade html-webpack-plugin@latest extract-text-webpack-plugin@next

Please note, that we need to upgrade extract-text-webpack-plugin to the @next tag.

I also noticed, that the ts-loader won't work anymore, so we have to upgrade it, too.

  • ts-loader
yarn upgrade ts-loader@latest

The only plugin, that doesn't work for me (currently) after migrating, is the clean-webpack-plugin. It throws some warnings and does nothing. I was wondering, why webpack wasn't cleaning the output directory itself, and got the following response from one of the webpack contributors.

Tobias Koppers (@wSokra)

So I removed the clean-webpack-plugin completely from my config.

Update webpack configs

The next step is to update the dev and production webpack configs. After running our application with npm run dev, webpack warns us, that the property mode is not set. To ease configuration, webpack added a property mode, that can and should be set to development or production. Webpack then adds default plugins and config variables depending on the mode property.

Set mode property

So the first thing is to add a property mode to our webpack configs and set it to production or development depending on the config.

After that, we look what default values webpack will set, and if they are the same as ours, we can remove them from our configuration.

devtool

The property devtool now defaults to eval in development mode. Sadly the default value eval is not enough for debugging typescript. Sourcemaps won't work with eval set. So we leave it as it is.

webpack.NoEmitOnErrorsPlugin

We can remove this plugin, as it is now enabled per default in production mode.

webpack.NamedModulesPlugin

We can also remove this plugin, as it is now enabled per default in production mode.

webpack.DefinePlugin

If we use this plugin, to only set NODEENV_ to production or development, we can omit this plugin too, as webpack will now set it for us. Or if we use it to also define other props, we can now remove the assignment of the property NODEENV_.

UglifyJSPlugin

We can also remove this plugin, as webpack applies it now as default in production mode.


After doing this, my application runs again. Hot reloading and debugging also works. You can look at my github project and look at the commits I did.

Liked the article? Share it!

Tweet