nav tabs on admin dashboard

node_modules/laravel-mix/src/components/Extract.js

@@ -1,20 +1,41 @@
-let webpack = require('webpack');
+let webpackMerge = require('webpack-merge');
 
 class Extract {
     /**
      * Create a new component instance.
      */
     constructor() {
+        this.entry = null;
         this.extractions = [];
     }
 
+    /**
+     * The name of the component.
+     *
+     * mix.extract() or mix.extractVendor()
+     */
+    name() {
+        return ['extract', 'extractVendors'];
+    }
+
     /**
      * Register the component.
      *
      * @param {*} libs
      * @param {string} output
      */
-    register(libs, output) {
+    register(libs = [], output) {
+        // If the user provides an output path as the first argument, they probably
+        // want to extract all node_module libraries to the specified file.
+        if (
+            arguments.length === 1 &&
+            typeof libs === 'string' &&
+            libs.endsWith('.js')
+        ) {
+            output = libs;
+            libs = [];
+        }
+
         this.extractions.push({ libs, output });
     }
 
@@ -24,32 +45,81 @@ class Extract {
      * @param {Entry} entry
      */
     webpackEntry(entry) {
-        this.extractions = this.extractions.map(
-            entry.addExtraction.bind(entry)
-        );
+        this.entry = entry;
 
-        // If we are extracting vendor libraries, then we also need
-        // to extract Webpack's manifest file to assist with caching.
-        if (this.extractions.length) {
-            this.extractions.push(
-                path.join(entry.base, 'manifest').replace(/\\/g, '/')
-            );
-        }
+        this.extractions.forEach(extraction => {
+            extraction.output = this.extractionPath(extraction.output);
+
+            if (extraction.libs.length) {
+                this.entry.addExtraction(extraction);
+            }
+        });
     }
 
-    /**
-     * webpack plugins to be appended to the master config.
-     */
-    webpackPlugins() {
-        // If we're extracting any vendor libraries, then we
-        // need to add the CommonChunksPlugin to strip out
-        // all relevant code into its own file.
-        if (this.extractions.length) {
-            return new webpack.optimize.CommonsChunkPlugin({
-                names: this.extractions,
-                minChunks: Infinity
-            });
+    webpackConfig(config) {
+        const newConfig = webpackMerge.smart(config, this.config());
+
+        config.optimization = newConfig.optimization;
+    }
+
+    config() {
+        return {
+            optimization: {
+                // If we are extracting vendor libraries, then we also need
+                // to extract Webpack's manifest file to assist with caching.
+                runtimeChunk: {
+                    name: path
+                        .join(this.entry.base, 'manifest')
+                        .replace(/\\/g, '/')
+                },
+
+                splitChunks: this.createSplitChunks()
+            }
+        };
+    }
+
+    createSplitChunks() {
+        let config = { cacheGroups: {} };
+
+        for (const [index, extraction] of this.extractions.entries()) {
+            if (extraction.libs.length) {
+                config.cacheGroups[`vendor${index}`] = this.createCacheGroup(
+                    extraction
+                );
+            }
         }
+
+        // If the user didn't specify any libraries to extract,
+        // they likely want to extract all vendor libraries.
+        if (Object.keys(config.cacheGroups).length === 0) {
+            config.chunks = 'all';
+            config.name = this.extractions[0].output;
+        }
+
+        return config;
+    }
+
+    createCacheGroup(extraction) {
+        const libsPattern = extraction.libs.join('|');
+        const pattern = new RegExp(`node_modules[\\\\/](${libsPattern})`, 'i');
+
+        return {
+            test: pattern,
+            name: extraction.output,
+            chunks: 'all',
+            enforce: true
+        };
+    }
+
+    extractionPath(outputPath) {
+        if (outputPath) {
+            return new File(outputPath)
+                .pathFromPublic(Config.publicPath)
+                .replace(/\.js$/, '')
+                .replace(/\\/g, '/');
+        }
+
+        return path.join(this.entry.base, 'vendor').replace(/\\/g, '/');
     }
 }