Some new files for JS rendering of new layout.

webpack.mix.js

@@ -1,18 +1,84 @@
-const mix = require('laravel-mix');
+let mix = require('laravel-mix');
+let Assert = require('laravel-mix/src/Assert');
+let glob = require('glob');
 
-/*
- |--------------------------------------------------------------------------
- | Mix Asset Management
- |--------------------------------------------------------------------------
- |
- | Mix provides a clean, fluent API for defining some Webpack build steps
- | for your Laravel application. By default, we are compiling the Sass
- | file for the application as well as bundling up all the JS files.
- |
- */
+mix.extend(
+    'foo',
+    new class {
 
-mix.react('resources/js/app.js', 'public/v2/assets/js')
-   .sass('resources/sass/app.scss', 'public/v2/assets/css');
+        constructor() {
+            this.toCompile = [];
+        }
+        /**
+         * The API name for the component.
+         */
+        name() {
+            return 'foo';
+        }
+        register(entry, output) {
+            if (typeof entry === 'string' && entry.includes('*')) {
+                entry = glob.sync(entry);
+            }
+
+            Assert.js(entry, output);
+
+            entry = [].concat(entry).map(file => new File(file));
+            output = new File(output);
+
+            this.toCompile.push({ entry, output });
+
+            Mix.bundlingJavaScript = true;
+        }
+
+        /**
+         * Assets to append to the webpack entry.
+         *
+         * @param {Entry} entry
+         */
+        webpackEntry(entry) {
+            this.toCompile.forEach(js => {
+                entry.addFromOutput(
+                    js.entry.map(file => file.path()),
+                    js.output,
+                    js.entry[0]
+                );
+            });
+        }
+        dependencies() {
+            return ["@babel/preset-flow",'@babel/preset-react'];
+        }
+
+        /**
+         * webpack rules to be appended to the master config.
+         */
+        webpackRules() {
+            return [].concat([
+                                 {
+                                     test: /\.jsx?$/,
+                                     exclude: /(node_modules|bower_components)/,
+                                     use: [
+                                         {
+                                             loader: 'babel-loader',
+                                             options: this.babelConfig()
+                                         }
+                                     ]
+                                 }
+                             ]);
+        }
+
+        /**
+         * Babel config to be merged with Mix's defaults.
+         */
+        babelConfig() {
+            return {
+                presets: ["@babel/preset-flow",'@babel/preset-react'],
+                plugins: [["@babel/plugin-proposal-class-properties"]]
+            };
+        }
 
 
+    }()
+);
 
+
+mix.foo('resources/js/app.js', 'public/v2/assets/js').sass('resources/sass/app.scss', 'public/v2/assets/css');