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.
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:
And because they moved the webpack cli to its own bundle, you have to install the webpack-cli separately.
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.
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.
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.
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.
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.
We can remove this plugin, as it is now enabled per default in production mode.
We can also remove this plugin, as it is now enabled per default in production mode.
If we use this plugin, to only set NODE_ENV 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 NODE_ENV.
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.