Webpack 4.0.0 was released last month and joy spread quickly amongst the people due to the faster compile time and the less complex configuration. However there are some minor things that failed when we tried to upgrade our webpack version directly. Let take a look at those things.

We use a template for vue.js called pwa-webpack-template. It's a great template and I recommend it for others out there with a vue.js setup. We're running the solution on .net core / mvc and don't need the html-webpack-plugin. However I heard this is also supported in webpack 4.

CommonChunksPlugin is dead, use splitChunks instead

I recon this as the most breaking change of the new release. The functionality was removed because of general performance and ease to use. Tobias Koppers has more to say about it here.

By changing:

plugins: [  
   new webpack.optimize.CommonsChunkPlugin({
       name: 'vendor',
       minChunks: module => {
          return (
             module.resource &&
                /\.js$/.test(module.resource) &&
                  module.resource.indexOf(path.join(__dirname, '../node_modules')) === 0);
       }
  }),
  new webpack.optimize.CommonsChunkPlugin({
     name: 'manifest',
     chunks: ['vendor']
  })

To:

optimization: {  
    minimize: true,
    splitChunks: {
        cacheGroups: {
            vendor: {
                chunks: 'initial',
                name: 'vendor',
                test: /node_modules/,
                enforce: true
            }
        }
    },
    runtimeChunk: {
        name: 'manifest'
    }
}

I split the vendor into a standalone file and make it accessible through a runtime chunk. I pull every reference to node_modules in as a vendor.

Extract-text-plugin to 4.0.0+

A plugin that we use to extract css from js. Extraxt-text-plugin v.3 uses Node version 4 that is no longer supported in webpack 4.1.1. At the moment extract-text-plugin has a v.4.0 in beta. I installed the beta version and the app is compiling!

That's it! Those are the problems I encountered. I'm sure there are plenty other third-party packages that aren't supported yet. Upgrade was mostly fixed by upgrading the webpack third party packages to the latest versions.