DEV Community

Dinesh Pandiyan
Dinesh Pandiyan

Posted on

Upgrade to Webpack 4 🎉

Upgrade to Webpack 4

Webpack 4 (codename Legato) was released two weeks back. And it is packed with a lot of shiny features. Unlike Webpack 3, which was not a major upgrade over its predecessor, Webpack 4 has a string of compelling features.

Major changes to look out for -

1. Reduced Build Time
The build time has gone down massively (more than 60%)

2. Zero configuration
You can now start using webpack with any project without any config file (introducing mode)

I recently upgraded my React-Redux Boilerplate to Webpack 4. There are no clear docs out there for migration yet, so it took me quite some time and struggle to complete the upgrade. I am writing down everything I figured so it can help anyone who wants to upgrade.

The following are the config changes that need to be done.

  • Mode
  • Plugins
  • Dependencies


Webpack 4 has two modes - development and production.

Previously we passed the flag -p to the webpack command to run a production build. With Webpack 4, you should always pass in mode option. You have two ways to pass in mode,

1. Pass through npm script

In your package.json -

"build": "webpack --config config/ --mode development"
"build:prod": "webpack --config config/ --mode production"
Enter fullscreen mode Exit fullscreen mode

2. Pass through config file

In your

mode: 'development'
Enter fullscreen mode Exit fullscreen mode

In your

mode: 'production'
Enter fullscreen mode Exit fullscreen mode


The following plugins have been removed from Webpack 4 which were extensively used in previous versions.

  • NoEmitOnErrorsPlugin
  • ModuleConcatenationPlugin
  • NamedModulesPlugin
  • CommonsChunkPlugin

Now instead, the configuration of these plugins should go inside the key optimization in the config file with their corresponding options.

This snippet might give you more info

plugins: [
    // new webpack.NamedModulesPlugin(), => not used like this anymore
    // new webpack.NoEmitOnErrorsPlugin(), => not used like this anymore
    // new webpack.optimize.CommonsChunkPlugin({ => not used like this anymore
        // name: 'vendor',
        // children: true,
        // minChunks: 2,
        // async: true,
    // }),
    // new webpack.optimize.ModuleConcatenationPlugin(), => not used like this anymore

optimization: {
    namedModules: true, // NamedModulesPlugin()
    splitChunks: { // CommonsChunkPlugin()
        name: 'vendor',
        minChunks: 2
    noEmitOnErrors: true, // NoEmitOnErrorsPlugin
    concatenateModules: true //ModuleConcatenationPlugin
Enter fullscreen mode Exit fullscreen mode


If you're using dependencies like webpack-hot-middleware and image-webpack-loader, make sure you upgrade them as well. I ran into a weird issue with webpack-hot-middleware but once I upgraded it to the latest version, it got resolved automatically.

You can refer to this commit in React-Redux Boilerplate for reference.

Webpack 4 is great in so many ways. But the lack of docs for upgrade is a bummer. But then, we're all amazing problem solvers, so we don't mind.

If you're planning to upgrade to Webpack 4, don't think twice, your dev experience will definitely multifold. God Speed!

Have a nice day! ✨

Top comments (5)

weswedding profile image
Weston Wedding

I found that having the schema open while trying to figure out what to do in my config file is always helpful!

sydwell profile image
Sydwell Williams

Anyone have success trying this with angular/cli?

olivermensahdev profile image
Oliver Mensah

Have you tried it to work with babel? I tried but it did not work for me.

flexdinesh profile image
Dinesh Pandiyan

Oliver - This React project is setup with Babel. Take a look at it React-Redux Boilerplate.

Hope it helps.

mujaddadi profile image
Taha Hassan Mujaddadi

Thanks, It was very helpful. You can also add that we will need to change the webpack 'loaders' property to 'rules'