How to split chunks in Webpack 4.0

This entry was published on Thursday, March 1, 2018
JavaScript Webpack

Webpack 4.0 was released a few days ago.  I happened to be in the middle of updating an older app and decided to jump to this version; especially because the webpack team is claiming a significant improvement in compile times (up to 98%!).

One of the common optimizations is to split the vendor and application code, which I did.  With webpack 4 that functionality has been changed significantly and turned into core functionality.  So, this requires some changes to your webpack config.  In my case, I was splitting the vendors by manually specifying the packages in the entry and then using the CommonsChunkPlugin to generate the separate bundle.

entry: {
    app: "./js/app.js",
    vendors: [
        "jquery", "lodash", "react", "react-router-dom", "react-hot-loader", "redux", "react-redux", "rxjs", "material-ui",
        "moment", "prop-types", "redux-observable", "pouchdb", "react-dom", "html-to-text", "material-ui-icons", "style-loader",
        "react-select"
    ]
},

// And then later in the config...

plugins: [
    // ...
    new webpack.optimize.CommonsChunkPlugin({name: "vendors", filename: "vendors.bundle.js"})
    // ...
],

I was basically packaging everything in node_modules in the separate file.  My simple approach to this splitting was simplified even more with webpack 4.  Now, I can accomplish the same, but I don’t have to individually specify the files.  I am guessing that there was a better way to accomplish this in webpack <4, but I never took the time to research it.  Anyways, here is what this config looks like for webpack 4.

entry: {
    app: "./js/app.js"
},

// And then later in the config.

optimization: {
    splitChunks: {
        cacheGroups: {
            commons: { test: /[\\/]node_modules[\\/]/, name: "vendors", chunks: "all" }
        }
    }
}

You also no longer need the CommonsChunkPlugin in the plugins section so you will also have to remove or comment that config.

In my case, I also had hardcoded the output filename, so, with the above changes that section also needed to be updated as shown below. In my case, I added the dynamic [name] placeholder.

output: {
    path: __dirname + "/assets",
    filename: "[name].bundle.js"
},

With the above changes, I was good to go with webpack 4 and ready to appreciate the faster compile times 🙂

Back to blog...