Get webpack working with the JS build

Author: DaneEveritt

.babelrc

@@ -1,8 +1,8 @@
 {
-  "presets": ["es2015"],
-  "compact": true,
-  "minified": true,
-  "only": "public/themes/pterodactyl/js/frontend/files/src/*.js",
-  "sourceMaps": "inline",
-  "comments": false
+  "presets": [
+    "@babel/preset-env"
+  ],
+  "plugins": [
+    "@babel/plugin-proposal-object-rest-spread"
+  ]
 }

gulpfile.js

@@ -48,31 +48,13 @@ function styles() {
         .pipe(gulp.dest(paths.manifest));
 }
 
-/**
- * Build all of the waiting scripts.
- */
-function scripts() {
-    return webpackStream(webpackConfig)
-        .pipe(babel())
-        .pipe(gulpif(argv.production, uglify()))
-        .pipe(concat('bundle.js'))
-        .pipe(rev())
-        .pipe(gulp.dest(paths.scripts.dest))
-        .pipe(rev.manifest(paths.manifest + '/manifest.json', {merge: true, base: paths.manifest}))
-        .pipe(gulp.dest(paths.manifest));
-}
-
 /**
  * Provides watchers.
  */
 function watch() {
     gulp.watch(['./resources/assets/styles/**/*.css'], gulp.series(function cleanStyles() {
         return del(['./public/assets/css/**/*.css']);
     }, styles));
-
-    gulp.watch(paths.scripts.watch, gulp.series(function cleanScripts() {
-        return del(['./public/assets/scripts/**/*.js']);
-    }, scripts));
 }
 
 /**
@@ -90,7 +72,7 @@ function i18n() {
 
 /**
  * Generate the routes file to be used in Vue files.
- * 
+ *
  * @returns {Promise<any>}
  */
 function routes() {
@@ -112,9 +94,7 @@ exports.clean = clean;
 exports.i18n = i18n;
 exports.routes = routes;
 exports.styles = styles;
-exports.scripts = scripts;
 exports.watch = watch;
 
 gulp.task('components', gulp.parallel(i18n, routes));
-gulp.task('scripts', gulp.series(clean, scripts));
-gulp.task('default', gulp.series(clean, i18n, routes, styles, scripts));
+gulp.task('default', gulp.series(clean, i18n, routes, styles));

package.json

@@ -8,11 +8,13 @@
         "vuex-i18n": "^1.10.5"
     },
     "devDependencies": {
+        "@babel/core": "^7.0.0-beta.49",
+        "@babel/preset-env": "^7.0.0-beta.49",
         "autoprefixer": "^8.2.0",
         "axios": "^0.18.0",
         "babel-cli": "6.18.0",
         "babel-core": "^6.26.0",
-        "babel-loader": "^7.1.4",
+        "babel-loader": "^8.0.0-beta",
         "babel-plugin-transform-object-assign": "^6.22.0",
         "babel-plugin-transform-runtime": "^6.23.0",
         "babel-plugin-transform-strict-mode": "^6.18.0",
@@ -39,6 +41,7 @@
         "postcss-preset-env": "^3.4.0",
         "postcss-scss": "^1.0.4",
         "tailwindcss": "^0.5.1",
+        "uglifyjs-webpack-plugin": "^1.2.5",
         "vee-validate": "^2.0.9",
         "vue-devtools": "^3.1.9",
         "vue-feather-icons": "^4.7.1",
@@ -47,6 +50,8 @@
         "vue-template-compiler": "^2.5.16",
         "vueify-insert-css": "^1.0.0",
         "webpack": "^4.4.1",
+        "webpack-cli": "^3.0.1",
+        "webpack-manifest-plugin": "^2.0.3",
         "webpack-serve": "^1.0.2",
         "webpack-stream": "^4.0.3",
         "yargs": "^11.0.0"

webpack.config.js

@@ -1,14 +1,19 @@
+const path = require('path');
+const ManifestPlugin = require('webpack-manifest-plugin');
+const UglifyJsPLugin = require('uglifyjs-webpack-plugin');
+
 module.exports = {
     mode: 'development',
+    devtool: 'source-map',
     performance: {
         hints: false,
     },
     entry: {
-        main: './resources/assets/scripts/app.js',
+        bundle: './resources/assets/scripts/app.js',
     },
     output: {
-        path: '/dist',
-        filename: 'webpack.build.js',
+        path: path.resolve(__dirname, 'public/assets/scripts'),
+        filename: 'bundle-[chunkhash].js',
     },
     module: {
         rules: [
@@ -26,10 +31,12 @@ module.exports = {
             },
             {
                 test: /\.js$/,
-                exclude: /(node_modules|vendor)/,
+                include: [
+                    path.resolve(__dirname, 'resources/assets/scripts'),
+                ],
                 use: [{
-                    loader: "babel-loader",
-                    options: { presets: ['es2015'] }
+                    loader: 'babel-loader',
+                    options: {babelrc: true}
                 }]
             },
         ]
@@ -40,4 +47,19 @@ module.exports = {
         },
         extensions: ['*', '.js', '.vue', '.json']
     },
+    plugins: [
+        new UglifyJsPLugin({
+            include: [
+                path.resolve(__dirname, 'resources/assets/scripts'),
+            ],
+            parallel: 2,
+            sourceMap: false,
+            uglifyOptions: {
+                ecma: 5,
+                toplevel: true,
+                safari10: true,
+            }
+        }),
+        new ManifestPlugin(),
+    ]
 };