Split node_modules to separate bundles

webpack.common.js

@@ -81,11 +81,29 @@ module.exports = {
         })
     ],
     output: {
-        filename: '[name].jellyfin.bundle.js',
+        filename: '[name].bundle.js',
         chunkFilename: '[name].[contenthash].chunk.js',
         path: path.resolve(__dirname, 'dist'),
         publicPath: ''
     },
+    optimization: {
+        runtimeChunk: 'single',
+        splitChunks: {
+            chunks: 'all',
+            maxInitialRequests: Infinity,
+            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];
+                        return `node_modules.${packageName}`;
+                    }
+                }
+            }
+        }
+    },
     module: {
         rules: [
             {

webpack.dev.js

@@ -5,7 +5,7 @@ module.exports = merge(common, {
     // In order for live reload to work we must use "web" as the target not "browserslist"
     target: process.env.WEBPACK_SERVE ? 'web' : 'browserslist',
     mode: 'development',
-    entry: './scripts/site.js',
+    entry: { 'main.jellyfin': './scripts/site.js' },
     devtool: 'source-map',
     module: {
         rules: [

webpack.prod.js

@@ -5,7 +5,7 @@ const WorkboxPlugin = require('workbox-webpack-plugin');
 
 module.exports = merge(common, {
     mode: 'production',
-    entry: './scripts/site.js',
+    entry: { 'main.jellyfin': './scripts/site.js' },
     plugins: [
         new WorkboxPlugin.InjectManifest({
             swSrc: path.resolve(__dirname, 'src/serviceworker.js'),