Initial Webpack 4 configuration

Author: DaneEveritt

.babelrc

@@ -1,9 +1,11 @@
 {
     "name": "pterodactyl-panel",
     "dependencies": {
-        "cssnano": "^4.0.3",
+        "axios": "^0.18.0",
         "date-fns": "^1.29.0",
         "feather-icons": "^4.10.0",
+        "jquery": "^3.3.1",
+        "lodash": "^4.17.11",
         "socket.io-client": "^2.1.1",
         "vee-validate": "^2.1.0-beta.2",
         "vue": "^2.5.7",
@@ -15,72 +17,55 @@
         "xterm": "^3.5.1"
     },
     "devDependencies": {
-        "@babel/core": "^7.0.0-beta.49",
-        "@babel/plugin-proposal-class-properties": "^7.2.1",
-        "@babel/plugin-proposal-object-rest-spread": "^7.0.0-beta.49",
-        "@babel/plugin-transform-async-to-generator": "^7.0.0-beta.49",
-        "@babel/plugin-transform-runtime": "^7.0.0-beta.49",
-        "@babel/preset-env": "^7.0.0-beta.49",
+        "@babel/cli": "^7.2.3",
+        "@babel/core": "^7.2.2",
+        "@babel/plugin-proposal-class-properties": "^7.3.0",
+        "@babel/plugin-proposal-object-rest-spread": "^7.3.1",
+        "@babel/preset-env": "^7.3.1",
         "@types/feather-icons": "^4.7.0",
         "@types/lodash": "^4.14.119",
         "@types/node": "^10.12.15",
         "@types/socket.io-client": "^1.4.32",
         "@types/webpack-env": "^1.13.6",
-        "autoprefixer": "^8.2.0",
-        "axios": "^0.18.0",
-        "babel-cli": "6.18.0",
-        "babel-core": "^6.26.3",
-        "babel-eslint": "^9.0.0",
-        "babel-loader": "^8.0.0-beta.3",
-        "babel-plugin-transform-flow-strip-types": "^6.22.0",
-        "babel-plugin-transform-object-assign": "^6.22.0",
-        "babel-plugin-transform-runtime": "^6.23.0",
-        "babel-plugin-transform-strict-mode": "^6.18.0",
-        "babel-register": "^6.26.0",
+        "babel-loader": "^8.0.5",
         "clean-webpack-plugin": "^0.1.19",
-        "css-loader": "^0.28.11",
-        "eslint": "^5.6.0",
-        "eslint-config-vue": "^2.0.2",
-        "eslint-plugin-html": "^4.0.6",
-        "eslint-plugin-vue": "^4.7.1",
-        "extract-text-webpack-plugin": "^4.0.0-beta.0",
+        "css-loader": "^2.1.0",
+        "cssnano": "^4.0.3",
         "glob-all": "^3.1.0",
         "html-webpack-plugin": "^3.2.0",
-        "jquery": "^3.3.1",
-        "lodash": "^4.17.5",
+        "mini-css-extract-plugin": "^0.5.0",
         "postcss": "^6.0.21",
         "postcss-import": "^11.1.0",
-        "postcss-loader": "^2.1.5",
+        "postcss-loader": "^3.0.0",
         "postcss-preset-env": "^3.4.0",
         "precss": "^3.1.2",
         "purgecss-webpack-plugin": "^1.1.0",
-        "style-loader": "^0.21.0",
-        "tailwindcss": "^0.5.1",
-        "ts-loader": "^5.3.1",
-        "typescript": "^3.2.2",
-        "uglifyjs-webpack-plugin": "^1.2.5",
+        "resolve-url-loader": "^3.0.0",
+        "style-loader": "^0.23.1",
+        "tailwindcss": "^0.7.4",
+        "ts-loader": "^5.3.3",
+        "typescript": "^3.3.1",
+        "uglifyjs-webpack-plugin": "^2.1.1",
         "vue-devtools": "^3.1.9",
         "vue-feather-icons": "^4.7.1",
-        "vue-loader": "^14.2.2",
+        "vue-loader": "^15.6.2",
         "vue-mc": "^0.2.4",
         "vue-template-compiler": "^2.5.16",
         "vueify-insert-css": "^1.0.0",
-        "webpack": "^4.4.1",
-        "webpack-assets-manifest": "^3.0.1",
+        "webpack": "^4.29.0",
+        "webpack-assets-manifest": "^3.1.1",
         "webpack-cli": "^3.0.2",
-        "webpack-hot-client": "^4.0.2",
+        "webpack-dev-server": "^3.1.14",
         "webpack-manifest-plugin": "^2.0.3",
-        "webpack-serve": "^1.0.2",
         "webpack-shell-plugin": "^0.5.0",
         "webpack-stream": "^4.0.3"
     },
     "scripts": {
-        "build:filemanager": "./node_modules/babel-cli/bin/babel.js public/themes/pterodactyl/js/frontend/files/src --source-maps --out-file public/themes/pterodactyl/js/frontend/files/filemanager.min.js",
         "watch": "NODE_ENV=development ./node_modules/.bin/webpack --watch --progress",
         "build": "NODE_ENV=development ./node_modules/.bin/webpack --progress",
         "build:production": "NODE_ENV=production ./node_modules/.bin/webpack",
-        "serve": "NODE_ENV=development webpack-serve --hot --config ./webpack.config.js --no-clipboard --progress",
-        "v:serve": "PUBLIC_PATH=http://pterodactyl.test:8080 NODE_ENV=development webpack-serve --hot --config ./webpack.config.js --host 0.0.0.0 --no-clipboard",
+        "serve": "NODE_ENV=development webpack-dev-server --host 0.0.0.0 --hot --hot-only",
+        "v:serve": "PUBLIC_PATH=http://pterodactyl.test:8080 yarn run serve",
         "compile:assets": "php artisan vue-i18n:generate & php artisan ziggy:generate resources/assets/scripts/helpers/ziggy.js"
     }
 }

.eslintrc

@@ -179,5 +179,5 @@
 </script>
 
 <style lang="postcss">
-    @import "~xterm/src/xterm.css";
+    /*@import "xterm/src/xterm.css";*/
 </style>

package.json

@@ -44,8 +44,8 @@
 <script>
 import map from 'lodash/map';
 import { mapState } from 'vuex';
-import FileManagerFileRow from '../components/filemanager/FileManagerFileRow';
-import FileManagerFolderRow from '../components/filemanager/FileManagerFolderRow';
+import FileManagerFileRow from '../components/filemanager/FileRow';
+import FileManagerFolderRow from '../components/filemanager/FolderRow';
 import { getDirectoryContents } from '../../../api/server/getDirectoryContents';
 
 export default {