Upgraded node dependencies to latest version. Improved speed of JS compilation.

.gitattributes

@@ -1,7 +1,7 @@
 # Linguist Normalizer
 *.yaml linguistic-language=PHP
 *.twig linguistic-language=PHP
-**/gulpfile.js linguist-vendored
+**/gulpfile.babel.js linguist-vendored
 **/webpack.conf.js linguist-vendored
 **/js/*.js linguist-vendored
 **/js/*.json linguist-vendored

CHANGELOG.md

@@ -7,6 +7,7 @@
     * Forward a `sid` to GPM when downloading a premium package
     * Better support for array field key/value when either key or value is stored empty [#1972](https://github.com/getgrav/grav-plugin-admin/issues/1972)
     * Remember the open state of the sidebar [#1973](https://github.com/getgrav/grav-plugin-admin/issues/1973)
+    * Upgraded node dependencies to latest version. Improved speed of JS compilation.
 1. [](#bugfix)
     * Fixed Safari issue with new ACL picker field [#1955](https://github.com/getgrav/grav-plugin-admin/issues/1955)
     * Stop propagation of ACL add button in ACL picker [flex-objects#83](https://github.com/trilbymedia/grav-plugin-flex-objects/issues/83)

themes/grav/.babelrc

@@ -0,0 +1,3 @@
+{
+  "presets": [ "@babel/preset-env" ]
+}

themes/grav/.eslintrc

@@ -1,4 +1,5 @@
 {
+  "root": true,
   "env": {
     "browser": true,
     "node": true

themes/grav/app/forms/fields/files.js

@@ -375,7 +375,7 @@ const addNode = (container) => {
     instances.push(new FilesField({ container, options }));
 };
 
-export let Instances = (() => {
+export let Instance = (() => {
     $('.dropzone.files-upload').each((i, container) => addNode(container));
     $('body').on('mutation._grav', onAddedNodes);
 

themes/grav/app/forms/fields/index.js

@@ -6,17 +6,17 @@ import DateTimeField, { Instance as DateTimeFieldInstance } from './datetime';
 import EditorField, { Instance as EditorFieldInstance } from './editor';
 import ColorpickerField, { Instance as ColorpickerFieldInstance } from './colorpicker';
 import FilesField, { Instance as FilesFieldInstance } from './files';
-import MediapickerField, { Instance as MediapickerInstance } from './mediapicker';
-import MultilevelField, { Instance as MultilevelInstance } from './multilevel';
 import SelectUniqueField, { Instance as SelectUniqueInstance } from './selectunique';
 import IconpickerField, { Instance as IconpickerInstance } from './iconpicker';
 import CronField, { Instance as CronFieldInstance } from './cron';
-import TextField, { Instance as TextFieldInstance } from './text';
-import ParentsField, { Instance as ParentsFieldInstance } from './parents';
+import ParentsField, { Instances as ParentsFieldInstance } from './parents';
 
 import './acl-picker';
 import './permissions';
 import './indeterminate';
+import './mediapicker';
+import './multilevel';
+import './text';
 
 export default {
     FilepickerField: {
@@ -55,14 +55,6 @@ export default {
         SelectUniqueField,
         Instance: SelectUniqueInstance
     },
-    MediapickerField: {
-        MediapickerField,
-        Instance: MediapickerInstance
-    },
-    MultilevelField: {
-        MultilevelField,
-        Instance: MultilevelInstance
-    },
     IconpickerField: {
         IconpickerField,
         Instance: IconpickerInstance
@@ -71,10 +63,6 @@ export default {
         CronField,
         Instance: CronFieldInstance
     },
-    TextField: {
-        TextField,
-        Instance: TextFieldInstance
-    },
     ParentsField: {
         ParentsField,
         Instance: ParentsFieldInstance

themes/grav/app/forms/fields/parents.js

@@ -5,7 +5,7 @@ import { config as gravConfig } from 'grav-config';
 let XHRUUID = 0;
 export const Instances = {};
 
-export class Parents {
+export default class Parents {
     constructor(container, field, data) {
         this.container = $(container);
         this.fieldName = field.attr('name');

themes/grav/app/main.js

@@ -1,3 +1,6 @@
+// polyfills
+import '@babel/polyfill';
+
 import $ from 'jquery';
 import './utils/remodal';
 import 'simplebar';
@@ -9,7 +12,7 @@ import Pages from './pages';
 import Forms from './forms';
 import './plugins';
 import './themes';
-import { Filter as MediaFilter, Instance as MediaFilterInstance} from './media';
+import MediaFilter, { Instance as MediaFilterInstance} from './media';
 import toastr from './utils/toastr';
 import request from './utils/request';
 import './utils/2fa';
@@ -19,6 +22,7 @@ import './whitelabel';
 // bootstrap jQuery extensions
 import './utils/bootstrap-transition';
 import './utils/bootstrap-collapse';
+import './utils/bootstrap-dropdown';
 
 // tabs memory
 import './utils/tabs-memory';

themes/grav/app/utils/bootstrap-dropdown.js

@@ -0,0 +1,169 @@
+import jQuery from 'jquery';
+
+/* ========================================================================
+ * Bootstrap: dropdown.js v3.4.1
+ * https://getbootstrap.com/docs/3.4/javascript/#dropdowns
+ * ========================================================================
+ * Copyright 2011-2019 Twitter, Inc.
+ * Licensed under MIT (https://github.com/twbs/bootstrap/blob/v3-dev/LICENSE)
+ * ======================================================================== */
+
++(function($) {
+    'use strict';
+
+    // DROPDOWN CLASS DEFINITION
+    // =========================
+
+    const backdrop = '.dropdown-backdrop';
+    const toggle = '[data-toggle="dropdown"]';
+    const Dropdown = function(element) {
+        $(element).on('click.bs.dropdown', this.toggle);
+    };
+
+    Dropdown.VERSION = '3.4.1';
+
+    function getParent($this) {
+        let selector = $this.attr('data-target');
+
+        if (!selector) {
+            selector = $this.attr('href');
+            selector = selector && /#[A-Za-z]/.test(selector) && selector.replace(/.*(?=#[^\s]*$)/, ''); // strip for ie7
+        }
+
+        const $parent = selector !== '#' ? $(document).find(selector) : null;
+
+        return $parent && $parent.length ? $parent : $this.parent();
+    }
+
+    function clearMenus(e) {
+        if (e && e.which === 3) { return; }
+        $(backdrop).remove();
+        $(toggle).each(function() {
+            const $this = $(this);
+            const $parent = getParent($this);
+            const relatedTarget = { relatedTarget: this };
+
+            if (!$parent.hasClass('open')) { return; }
+
+            if (e && e.type === 'click' && /input|textarea/i.test(e.target.tagName) && $.contains($parent[0], e.target)) { return; }
+
+            $parent.trigger(e = $.Event('hide.bs.dropdown', relatedTarget));
+
+            if (e.isDefaultPrevented()) { return; }
+
+            $this.attr('aria-expanded', 'false');
+            $parent.removeClass('open').trigger($.Event('hidden.bs.dropdown', relatedTarget));
+        });
+    }
+
+    Dropdown.prototype.toggle = function(e) {
+        const $this = $(this);
+
+        if ($this.is('.disabled, :disabled')) { return; }
+
+        const $parent = getParent($this);
+        const isActive = $parent.hasClass('open');
+
+        clearMenus();
+
+        if (!isActive) {
+            if ('ontouchstart' in document.documentElement && !$parent.closest('.navbar-nav').length) {
+                // if mobile we use a backdrop because click events don't delegate
+                $(document.createElement('div'))
+                    .addClass('dropdown-backdrop')
+                    .insertAfter($(this))
+                    .on('click', clearMenus);
+            }
+
+            const relatedTarget = { relatedTarget: this };
+            $parent.trigger(e = $.Event('show.bs.dropdown', relatedTarget));
+
+            if (e.isDefaultPrevented()) { return; }
+
+            $this
+                .trigger('focus')
+                .attr('aria-expanded', 'true');
+
+            $parent
+                .toggleClass('open')
+                .trigger($.Event('shown.bs.dropdown', relatedTarget));
+        }
+
+        return false;
+    };
+
+    Dropdown.prototype.keydown = function(e) {
+        if (!/(38|40|27|32)/.test(e.which) || /input|textarea/i.test(e.target.tagName)) return;
+
+        const $this = $(this);
+
+        e.preventDefault();
+        e.stopPropagation();
+
+        if ($this.is('.disabled, :disabled')) {
+            return;
+        }
+
+        const $parent = getParent($this);
+        const isActive = $parent.hasClass('open');
+
+        if (!isActive && e.which !== 27 || isActive && e.which === 27) {
+            if (e.which === 27) {
+                $parent.find(toggle).trigger('focus');
+            }
+
+            return $this.trigger('click');
+        }
+
+        const desc = ' li:not(.disabled):visible a';
+        const $items = $parent.find('.dropdown-menu' + desc);
+
+        if (!$items.length) {
+            return;
+        }
+
+        let index = $items.index(e.target);
+
+        if (e.which === 38 && index > 0) { index--; } // up
+        if (e.which === 40 && index < $items.length - 1) { index++; } // down
+        if (!~index) { index = 0; }
+
+        $items.eq(index).trigger('focus');
+    };
+
+    // DROPDOWN PLUGIN DEFINITION
+    // ==========================
+
+    function Plugin(option) {
+        return this.each(function() {
+            const $this = $(this);
+            let data = $this.data('bs.dropdown');
+
+            if (!data) $this.data('bs.dropdown', (data = new Dropdown(this)));
+            if (typeof option === 'string') data[option].call($this);
+        });
+    }
+
+    const old = $.fn.dropdown;
+
+    $.fn.dropdown = Plugin;
+    $.fn.dropdown.Constructor = Dropdown;
+
+    // DROPDOWN NO CONFLICT
+    // ====================
+
+    $.fn.dropdown.noConflict = function() {
+        $.fn.dropdown = old;
+        return this;
+    };
+
+    // APPLY TO STANDARD DROPDOWN ELEMENTS
+    // ===================================
+
+    $(document)
+        .on('click.bs.dropdown.data-api', clearMenus)
+        .on('click.bs.dropdown.data-api', '.dropdown form', function(e) { e.stopPropagation(); })
+        .on('click.bs.dropdown.data-api', toggle, Dropdown.prototype.toggle)
+        .on('keydown.bs.dropdown.data-api', toggle, Dropdown.prototype.keydown)
+        .on('keydown.bs.dropdown.data-api', '.dropdown-menu', Dropdown.prototype.keydown);
+}(jQuery));

themes/grav/app/utils/gpm.js

@@ -1,6 +1,6 @@
 import { parseJSON, parseStatus, userFeedbackError } from './response';
 import { config } from 'grav-config';
-import { EventEmitter } from 'events';
+import EventEmitter from 'events';
 
 export default class GPM extends EventEmitter {
     constructor(action = 'getUpdates') {

themes/grav/css-compiled/simple-fonts.css

@@ -1,3 +1,2 @@
-body,h5,h6,.badge,.note,.grav-mdeditor-preview,input,select,textarea,button,.selectize-input,h1,h2,h3,h4,.fontfamily-sans .CodeMirror pre,#admin-menu li,.form-tabs>label,.label{font-family:"Helvetica Neue", "Helvetica", "Tahoma", "Geneva", "Arial", sans-serif}.CodeMirror pre,code,kbd,pre,samp,.mono{font-family:"SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace}
-
-/*# sourceMappingURL=simple-fonts.css.map */
+#admin-menu li,.badge,.fontfamily-sans .CodeMirror pre,.form-tabs>label,.grav-mdeditor-preview,.label,.note,.selectize-input,body,button,h1,h2,h3,h4,h5,h6,input,select,textarea{font-family:"Helvetica Neue",Helvetica,Tahoma,Geneva,Arial,sans-serif}.CodeMirror pre,.mono,code,kbd,pre,samp{font-family:SFMono-Regular,Consolas,"Liberation Mono",Menlo,Courier,monospace}
+/*# sourceMappingURL=data:application/json;charset=utf8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInNpbXBsZS1mb250cy5zY3NzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUtBLGVBSkEsT0FHQSxpQ0FDZ0IsaUJBSkQsdUJBSXFCLE9BSjVCLE1BQ3lCLGlCQUZqQyxLQUV5QixPQUN6QixHQUFJLEdBQUksR0FBSSxHQUhOLEdBQUksR0FFVixNQUFPLE9BQVEsU0FJWCxZQUFhLGdCQUFBLENBQUEsU0FBQSxDQUFBLE1BQUEsQ0FBQSxNQUFBLENBQUEsS0FBQSxDQUFBLFdBQ2hCLGdCQUdxQixNQUF0QixLQUFNLElBQUssSUFBSyxLQUNaLFlBQWEsY0FBQSxDQUFBLFFBQUEsQ0FBQSxpQkFBQSxDQUFBLEtBQUEsQ0FBQSxPQUFBLENBQUEiLCJmaWxlIjoic2ltcGxlLWZvbnRzLmNzcyIsInNvdXJjZXNDb250ZW50IjpbImJvZHksIGg1LCBoNixcbi5iYWRnZSwgLm5vdGUsIC5ncmF2LW1kZWRpdG9yLXByZXZpZXcsXG5pbnB1dCwgc2VsZWN0LCB0ZXh0YXJlYSwgYnV0dG9uLCAuc2VsZWN0aXplLWlucHV0LFxuaDEsIGgyLCBoMywgaDQsXG4uZm9udGZhbWlseS1zYW5zIC5Db2RlTWlycm9yIHByZSxcbiNhZG1pbi1tZW51IGxpLCAuZm9ybS10YWJzID4gbGFiZWwsIC5sYWJlbCwge1xuICAgIGZvbnQtZmFtaWx5OiBcIkhlbHZldGljYSBOZXVlXCIsIFwiSGVsdmV0aWNhXCIsIFwiVGFob21hXCIsIFwiR2VuZXZhXCIsIFwiQXJpYWxcIiwgc2Fucy1zZXJpZjtcbn1cbi8vLmNrLWVkaXRvciBzaG9ydGNvZGUsIC5jay1lZGl0b3IgdHdpZyxcbi5Db2RlTWlycm9yIHByZSxcbmNvZGUsIGtiZCwgcHJlLCBzYW1wLCAubW9ubyAge1xuICAgIGZvbnQtZmFtaWx5OiBcIlNGTW9uby1SZWd1bGFyXCIsIENvbnNvbGFzLCBcIkxpYmVyYXRpb24gTW9ub1wiLCBNZW5sbywgQ291cmllciwgbW9ub3NwYWNlO1xufVxuIl19 */

themes/grav/gulpfile.babel.js

@@ -0,0 +1,35 @@
+import gulp from 'gulp';
+import sass from 'gulp-sass';
+import sourcemaps from 'gulp-sourcemaps';
+import cleanCSS from 'gulp-clean-css';
+
+const paths = {
+    styles: {
+        src: 'scss/**/*.scss',
+        dest: 'css-compiled'
+    }
+};
+
+export function styles() {
+    return gulp.src(paths.styles.src)
+        .pipe(sourcemaps.init())
+        .pipe(sass({ outputStyle: 'compressed' }))
+        .on('error', sass.logError)
+        .pipe(cleanCSS())
+        .pipe(sourcemaps.write())
+        .pipe(gulp.dest(paths.styles.dest));
+}
+
+export function css() {
+    return styles();
+}
+
+function watchFiles() {
+    gulp.watch(paths.styles.src, styles);
+}
+
+export { watchFiles as watch };
+
+const build = gulp.series(styles);
+
+export default build;

themes/grav/gulpfile.js

@@ -1,110 +0,0 @@
-'use strict';
-
-var gulp        = require('gulp'),
-    util        = require('util'),
-    path        = require('path'),
-    gutil       = require('gulp-util'),
-    path        = require('path'),
-    immutable   = require('immutable'),
-    merge       = require('merge-stream'),
-    gulpWebpack = require('gulp-webpack'),
-    webpack     = require('webpack'),
-    sass        = require('gulp-sass'),
-    sourcemaps  = require('gulp-sourcemaps');
-
-var plugins = {
-        'Promise': 'imports?this=>global!exports?global.Promise!babel-polyfill',
-        'fetch': 'imports?this=>global!exports?global.fetch!whatwg-fetch'
-    },
-    base    = immutable.fromJS(require('./webpack.conf.js')),
-    options = {
-        dev: base.mergeDeep({
-            devtool: 'source-map',
-            plugins: [
-                new webpack.DefinePlugin({
-                    'process.env': { NODE_ENV: '"development"' }
-                }),
-                new webpack.ProvidePlugin(plugins),
-                new webpack.optimize.CommonsChunkPlugin("vendor", "vendor.js", Infinity)
-            ],
-            output: {
-                filename: 'admin.js'
-            }
-        }),
-
-        prod: base.mergeDeep({
-            devtool: 'source-map',
-            plugins: [
-                new webpack.DefinePlugin({
-                    'process.env': { NODE_ENV: '"production"' }
-                }),
-                new webpack.optimize.UglifyJsPlugin({
-                    sourceMap: true,
-                    compress: {
-                        warnings: false
-                    }
-                }),
-                new webpack.ProvidePlugin(plugins),
-                new webpack.optimize.CommonsChunkPlugin("vendor", "vendor.min.js", Infinity)
-            ],
-            output: {
-                filename: 'admin.min.js'
-            }
-        })
-    };
-
-var compileJS = function(watch) {
-    var devOpts  = options.dev.set('watch', watch),
-        prodOpts = options.prod.set('watch', watch);
-
-    var prod = gulp.src('app/main.js')
-        .pipe(gulpWebpack(prodOpts.toJS()))
-        .pipe(gulp.dest('js/'));
-
-    /*var dev = gulp.src('app/main.js')
-        .pipe(gulpWebpack(devOpts.toJS()))
-        .pipe(gulp.dest('js/'));*/
-
-    // return merge(prod, dev);
-    return prod;
-};
-
-var compileCSS = function(event) {
-    return gulp.src('./scss/**/*.scss')
-        .on('end', function() {
-            // console.log(util.inspect(event));
-            if (event && event.path) {
-                gutil.log(gutil.colors.green('√'), 'Saved change for "' + event.path.replace(__dirname, '') + '"');
-            }
-        })
-        .on('error', gutil.log)
-        .pipe(sourcemaps.init())
-        .pipe(sass({outputStyle: 'compressed'}).on('error', sass.logError))
-        .pipe(sourcemaps.write('./'))
-        .pipe(gulp.dest('./css-compiled'));
-};
-
-gulp.task('js', function() {
-    compileJS(false);
-});
-
-gulp.task('css', function() {
-    compileCSS();
-});
-
-gulp.task('watch', function() {
-    compileJS(true);
-    gulp.watch('./scss/**/*.scss', compileCSS);
-});
-
-gulp.task('watch-js', function() {
-    compileJS(true);
-});
-
-gulp.task('watch-css', function() {
-    compileCSS();
-    gulp.watch('./scss/**/*.scss', compileCSS);
-});
-
-gulp.task('all', ['css', 'js']);
-gulp.task('default', ['all']);

themes/grav/package.json

@@ -5,60 +5,69 @@
   "repository": "https://github.com/getgrav/grav-admin",
   "main": "app/main.js",
   "scripts": {
-    "watch": "gulp watch",
-    "js": "gulp js",
+    "watch": "webpack --mode development --watch --progress --color --mode development --config webpack.conf.js",
+    "js": "webpack --mode production --config webpack.conf.js",
     "css": "gulp css",
-    "watch-js": "gulp watch-js",
+    "watch-js": "webpack --mode development --watch --progress --color --mode development --config webpack.conf.js",
     "watch-css": "gulp watch-css"
   },
-  "author": "RocketTheme, LLC",
+  "author": "Trilby Media, LLC",
   "license": "MIT",
   "dependencies": {
-    "chartist": "0.11.0",
-    "codemirror": "^5.30.0",
+    "chartist": "0.11.4",
+    "codemirror": "^5.58.2",
     "cookies-js": "^1.2.3",
-    "debounce": "^1.0.2",
-    "dropzone": "^5.3.0",
+    "debounce": "^1.2.0",
+    "dropzone": "^5.7.2",
     "eonasdan-bootstrap-datetimepicker": "^4.17.47",
     "es6-map": "^0.1.5",
-    "es6-promise": "^4.1.1",
+    "buffer": "^6.0.2",
+    "events": "^3.2.0",
+    "es6-promise": "^4.2.8",
     "eventemitter3": "^4.0.7",
     "exif-js": "^2.3.0",
-    "gemini-scrollbar": "^1.5.2",
-    "immutable": "^3.8.1",
+    "immutable": "^3.8.2",
     "immutablediff": "^0.4.4",
-    "js-yaml": "^3.10.0",
-    "mout": "^1.0.0",
+    "js-yaml": "^3.14.0",
+    "mout": "^1.2.2",
     "popper.js": "^1.14.4",
-    "rangetouch": "^1.0.5",
+    "rangetouch": "^2.0.1",
     "remodal": "^1.1.1",
-    "selectize": "^0.12.4",
-    "sortablejs": "^1.6.1",
+    "selectize": "^0.12.6",
+    "simplebar": "^5.3.0",
+    "sortablejs": "^1.10.1",
     "speakingurl": "^14.0.1",
-    "toastr": "^2.1.2",
+    "toastr": "^2.1.4",
     "watchjs": "0.0.0",
-    "whatwg-fetch": "^2.0.3",
-    "yarn": "^1.15.2"
+    "whatwg-fetch": "^3.5.0",
+    "yarn": "^1.22.10"
   },
   "devDependencies": {
-    "babel-core": "^6.25.0",
-    "babel-loader": "^6.4.1",
-    "babel-polyfill": "^6.23.0",
-    "babel-preset-es2015": "^6.24.1",
-    "babel-preset-stage-3": "^6.24.1",
-    "css-loader": "^0.28.4",
-    "eslint": "^4.2.0",
-    "eslint-loader": "^1.9.0",
-    "exports-loader": "^0.6.4",
-    "gulp": "^3.9.1",
-    "gulp-sass": "^3.1.0",
-    "gulp-sourcemaps": "^2.6.0",
-    "gulp-util": "^3.0.8",
-    "gulp-webpack": "^1.5.0",
-    "imports-loader": "^0.7.1",
-    "json-loader": "^0.5.4",
-    "merge-stream": "^1.0.1",
-    "style-loader": "^0.18.2",
-    "webpack": "^1.15.0"
+    "@babel/core": "^7.12.3",
+    "@babel/plugin-proposal-class-properties": "^7.12.1",
+    "@babel/plugin-proposal-json-strings": "^7.12.1",
+    "@babel/plugin-proposal-object-rest-spread": "^7.12.1",
+    "@babel/plugin-syntax-dynamic-import": "^7.8.3",
+    "@babel/plugin-syntax-import-meta": "^7.10.4",
+    "@babel/polyfill": "^7.12.1",
+    "@babel/preset-env": "^7.12.1",
+    "@babel/register": "^7.12.1",
+    "babel-eslint": "^10.1.0",
+    "babel-loader": "^8.2.1",
+    "css-loader": "^5.0.1",
+    "eslint": "^7.13.0",
+    "eslint-loader": "^4.0.2",
+    "exports-loader": "^1.1.1",
+    "gulp": "^4.0.2",
+    "gulp-babel": "^8.0.0",
+    "gulp-clean-css": "^4.3.0",
+    "gulp-sass": "^4.1.0",
+    "gulp-sourcemaps": "^3.0.0",
+    "imports-loader": "^1.2.0",
+    "json-loader": "^0.5.7",
+    "style-loader": "^2.0.0",
+    "uglifyjs-webpack-plugin": "^2.2.0",
+    "webpack": "^5.5.1",
+    "webpack-cli": "^4.2.0"
   }
 }

themes/grav/scss/template/_admin.scss

@@ -674,8 +674,8 @@ body.sidebar-quickopen #admin-main {
         }
 
         &.grav:before {
-            font-family: rockettheme-apps;
-            content: "\62";
+            font-family: FontAwesome, sans-serif;
+            content: "\f2d6";
             vertical-align: bottom;
         }
         &.grav {

themes/grav/webpack.conf.js

@@ -1,42 +1,62 @@
-var path    = require('path'),
-    webpack = require('webpack');
+const path = require('path');
+const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
 
-module.exports = {
+module.exports = (env, argv) => ({
     entry: {
-        app: './app/main.js',
-        vendor: [
-            'codemirror',
-            'chartist',
-            'selectize',
-            /* 'rangetouch',*/
-            'toastr',
-            'bootstrap',
-            'sortablejs',
-            'dropzone',
-            'watchjs',
-            'js-yaml',
-            'speakingurl',
-            'moment',
-            'moment-timezone',
-            'whatwg-fetch'
-        ]
+        admin: './app/main.js'
     },
+    devtool: argv.mode === 'production' ? false : 'eval-source-map',
+    target: 'web',
     output: {
         path: path.resolve(__dirname, 'js'),
+        filename: '[name].min.js',
+        chunkFilename: 'vendor.min,js',
         library: 'Grav'
     },
+    optimization: {
+        minimize: argv.mode === 'disabled-production',
+        minimizer: [
+            new UglifyJsPlugin({
+                uglifyOptions: {
+                    compress: {
+                        drop_console: true
+                    }
+                }
+            })
+        ],
+        splitChunks: {
+            cacheGroups: {
+                vendors: {
+                    test: /[\\/]node_modules[\\/]/,
+                    priority: 1,
+                    name: 'vendor',
+                    enforce: true,
+                    chunks: 'all'
+                }
+            }
+        }
+    },
     externals: {
         jquery: 'jQuery',
         'grav-config': 'GravAdmin'
     },
     module: {
-        preLoaders: [
-            { test: /\.json$/, loader: 'json' },
-            { test: /\.js$/, loader: 'eslint', exclude: /node_modules/ }
-        ],
-        loaders: [
-            { test: /\.css$/, loader: 'style-loader!css-loader' },
-            { test: /\.js$/, loader: 'babel', exclude: /node_modules/, query: { presets: ['es2015', 'stage-3'] } }
+        rules: [
+            { enforce: 'pre', test: /\.json$/, loader: 'json-loader' },
+            { enforce: 'pre', test: /\.js$/, loader: 'eslint-loader', exclude: /node_modules/ },
+            {
+                test: /\.css$/,
+                use: ['style-loader', 'css-loader']
+            },
+            {
+                test: /\.js$/,
+                loader: 'babel-loader',
+                exclude: /node_modules/,
+                options: {
+                    presets: ['@babel/preset-env'],
+                    plugins: ['@babel/plugin-proposal-object-rest-spread']
+                }
+            }
         ]
     }
-};
+});