Configure webpack chunks by vendor

webpack.config.js

@@ -16,7 +16,8 @@ module.exports = {
   },
   output: {
     path: path.resolve('./assets/webpack_bundles/'),
-    filename: "[name]-[hash].js"
+    filename: "[name]-[hash].js",
+    chunkFilename: "[id]-[chunkhash].js",
   },
   plugins: [
     new BundleTracker({filename: './webpack-stats.json'}),
@@ -65,6 +66,29 @@ module.exports = {
       },
     ],
   },
+  optimization: {
+    runtimeChunk: "single",
+    splitChunks: {
+      chunks: "all",
+      maxInitialRequests: Infinity,
+      minSize: 0,
+      cacheGroups: {
+        vendor: {
+          test: /[\\/]node_modules[\\/]/,
+          name(module) {
+            // get the name. E.g. node_modules/packageName/not/this/part.js
+            // or node_modules/packageName
+            const packageName = module.context.match(
+              /[\\/]node_modules[\\/](.*?)([\\/]|$)/
+            )[1];
+
+            // npm package names are URL-safe, but some servers don't like @ symbols
+            return `npm.${packageName.replace("@", "")}`;
+          }
+        }
+      }
+    }
+  },
   resolve: {
     modules: [path.resolve('./node_modules')],
     alias: {