Initial Webpack 4 configuration

2019-02-02 17:33:12 -08:00 · 2019-02-02 17:33:12 -08:00 · cc6d10d7f8
parent 2a0d649b2a
commit cc6d10d7f8
7 changed files with 2185 additions and 2584 deletions
--- a/.babelrc
+++ b/.babelrc
@ -1,9 +0,0 @@
-{
-    "presets": [
-        "@babel/preset-env"
-    ],
-    "plugins": [
-        ["@babel/plugin-proposal-object-rest-spread", { "useBuiltIns": true }],
-        "@babel/plugin-proposal-class-properties"
-    ]
-}
--- a/.eslintrc
+++ b/.eslintrc
@ -1,11 +0,0 @@
-{
-  "parser": "babel-eslint",
-  "plugins": ["html"],
-  "extends": ["vue"],
-  "rules": {
-    "semi": "off",
-    "indent": ["error", 4],
-    "comma-dangle": ["error", "always-multiline"],
-    "no-unused-vars": "warn"
-  }
-}
--- a/package.json
+++ b/package.json
@ -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"
    }
 }
--- a/resources/assets/scripts/components/server/subpages/Console.vue
+++ b/resources/assets/scripts/components/server/subpages/Console.vue
@ -179,5 +179,5 @@
 </script>

 <style lang="postcss">
-    @import "~xterm/src/xterm.css";
+    /*@import "xterm/src/xterm.css";*/
 </style>
--- a/resources/assets/scripts/components/server/subpages/FileManager.vue
+++ b/resources/assets/scripts/components/server/subpages/FileManager.vue
@ -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 {
--- a/webpack.config.js
+++ b/webpack.config.js
@ -5,22 +5,15 @@ const glob = require('glob-all');

 const AssetsManifestPlugin = require('webpack-assets-manifest');
 const CleanPlugin = require('clean-webpack-plugin');
-const ExtractTextPlugin = require('extract-text-webpack-plugin');
+const MiniCssExtractPlugin = require('mini-css-extract-plugin');
 const ShellPlugin = require('webpack-shell-plugin');
 const PurgeCssPlugin = require('purgecss-webpack-plugin');
 const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
+const VueLoaderPlugin = require('vue-loader/lib/plugin');

-// Custom PurgeCSS extractor for Tailwind that allows special characters in
-// class names.
-//
-// https://github.com/FullHuman/purgecss#extractor
-class TailwindExtractor {
-    static extract (content) {
-        return content.match(/[A-z0-9-:\/]+/g) || [];
-    }
-}
+const isProduction = process.env.NODE_ENV === 'production';

-const basePlugins = [
+let plugins = [
    new CleanPlugin(path.resolve(__dirname, 'public/assets')),
    new ShellPlugin({
        onBuildStart: [
@ -28,56 +21,101 @@ const basePlugins = [
            'php artisan ziggy:generate resources/assets/scripts/helpers/ziggy.js',
        ],
    }),
-    new ExtractTextPlugin('bundle-[hash].css', {
-        allChunks: true,
-    }),
+    new MiniCssExtractPlugin({ filename: 'bundle.[hash:8].css' }),
    new AssetsManifestPlugin({
        writeToDisk: true,
        publicPath: true,
        integrity: true,
        integrityHashes: ['sha384'],
    }),
+    new VueLoaderPlugin(),
 ];

-const productionPlugins = [
-    new PurgeCssPlugin({
-        paths: glob.sync([
-            path.join(__dirname, 'resources/assets/scripts/**/*.vue'),
-            path.join(__dirname, 'resources/themes/pterodactyl/**/*.blade.php'),
-        ]),
-        // Don't let PurgeCSS remove classes ending with -enter or -leave-active
-        // They're used by Vue transitions and are therefore not specifically defined
-        // in any of the files are are checked by PurgeCSS.
-        whitelistPatterns: [/-enter$/, /-leave-active$/],
-        extractors: [
-            {
-                extractor: TailwindExtractor,
-                extensions: ['html', 'js', 'php', 'vue'],
-            },
-        ],
-    }),
-    new UglifyJsPlugin({
-        include: [
-            path.join(__dirname, 'resources/assets/scripts'),
-            path.join(__dirname, 'node_modules'),
-            path.join(__dirname, 'vendor/tightenco'),
-        ],
-        cache: true,
-        parallel: 2,
-    }),
+if (isProduction) {
+    plugins = plugins.concat([
+        new PurgeCssPlugin({
+            paths: glob.sync([
+                path.join(__dirname, 'resources/assets/scripts/**/*.vue'),
+                path.join(__dirname, 'resources/assets/scripts/**/*.ts'),
+                path.join(__dirname, 'resources/themes/pterodactyl/**/*.blade.php'),
+            ]),
+            // Don't let PurgeCSS remove classes ending with -enter or -leave-active
+            // They're used by Vue transitions and are therefore not specifically defined
+            // in any of the files are are checked by PurgeCSS.
+            whitelistPatterns: [/-enter$/, /-leave-active$/],
+            extractors: [
+                {
+                    extractor: class {
+                        static extract (content) {
+                            return content.match(/[A-z0-9-:\/]+/g) || [];
+                        }
+                    },
+                    extensions: ['html', 'js', 'php', 'vue'],
+                },
+            ],
+        }),
+    ]);
+}
+
+const typescriptLoaders = [
+    {
+        loader: 'babel-loader',
+        options: {
+            cacheDirectory: !isProduction,
+            presets: ['@babel/preset-env'],
+            plugins: [
+                '@babel/plugin-proposal-class-properties',
+                ['@babel/plugin-proposal-object-rest-spread', { 'useBuiltIns': true }]
+            ],
+        },
+    },
+    {
+        loader: 'ts-loader',
+        options: {
+            appendTsSuffixTo: [/\.vue$/],
+            experimentalWatchApi: true,
+        }
+    }
+];
+
+const cssLoaders = [
+    { loader: MiniCssExtractPlugin.loader },
+    {
+        loader: 'css-loader',
+        options: {
+            sourceMap: !isProduction,
+            importLoaders: 1,
+        }
+    },
+    { loader: 'resolve-url-loader' },
+    {
+        loader: 'postcss-loader',
+        options: {
+            ident: 'postcss',
+            sourceMap: true,
+            plugins: [
+                require('postcss-import'),
+                tailwind('./tailwind.js'),
+                require('postcss-preset-env')({
+                    stage: 2,
+                }),
+                require('precss'),
+            ].concat(isProduction ? require('cssnano') : []),
+        }
+    }
 ];

 module.exports = {
    mode: process.env.NODE_ENV,
-    devtool: process.env.NODE_ENV === 'production' ? false : 'inline-source-map',
+    devtool: isProduction ? false : 'inline-source-map',
    performance: {
        hints: false,
    },
-    // Passing an array loads them all but only exports the last.
    entry: ['./resources/assets/styles/main.css', './resources/assets/scripts/app.ts'],
    output: {
        path: path.resolve(__dirname, 'public/assets'),
-        filename: 'bundle-[hash].js',
+        filename: 'bundle.[hash:8].js',
+        chunkFilename: 'chunk.[name].js',
        publicPath: _.get(process.env, 'PUBLIC_PATH', '') + '/assets/',
        crossOriginLoading: 'anonymous',
    },
@ -89,54 +127,21 @@ module.exports = {
            },
            {
                test: /\.ts$/,
-                loader: 'ts-loader',
                exclude: /node_modules/,
-                options: {
-                    appendTsSuffixTo: [/\.vue$/],
-                },
-            },
-            {
-                test: /\.js$/,
-                include: [
-                    path.resolve(__dirname, 'resources'),
-                ],
-                loader: 'babel-loader?cacheDirectory',
+                use: typescriptLoaders,
            },
            {
                test: /\.css$/,
                include: [
                    path.resolve(__dirname, 'resources'),
                ],
-                use: ExtractTextPlugin.extract({
-                    fallback: 'style-loader',
-                    use: [{
-                        loader: 'css-loader',
-                        options: {
-                            sourceMap: true,
-                            importLoaders: 1,
-                        },
-                    }, {
-                        loader: 'postcss-loader',
-                        options: {
-                            ident: 'postcss',
-                            sourceMap: true,
-                            plugins: [
-                                require('postcss-import'),
-                                tailwind('./tailwind.js'),
-                                require('postcss-preset-env')({ stage: 0 }),
-                                require('precss'),
-                                require('autoprefixer'),
-                                require('cssnano'),
-                            ],
-                        },
-                    }],
-                }),
+                use: cssLoaders,
            },
            {
                test: /\.(png|jpg|gif|svg)$/,
                loader: 'file-loader',
                options: {
-                    name: '[name].[ext]?[hash]',
+                    name: '[name].[ext]?[hash:8]',
                },
            },
        ],
@ -148,18 +153,29 @@ module.exports = {
        },
        symlinks: false,
    },
-    plugins: process.env.NODE_ENV === 'production' ? basePlugins.concat(productionPlugins) : basePlugins,
-    serve: {
-        content: './public/',
-        dev: {
-            publicPath: '/assets/',
-            headers: {
-                'Access-Control-Allow-Origin': '*',
-            },
-        },
-        hot: {
-            hmr: true,
-            reload: true,
+    plugins: plugins,
+    optimization: {
+        minimize: true,
+        minimizer: !isProduction ? [] : [
+            new UglifyJsPlugin({
+                cache: true,
+                parallel: true,
+                uglifyOptions: {
+                    output: {
+                        comments: false,
+                    },
+                },
+            }),
+        ],
+    },
+    devServer: {
+        contentBase: path.join(__dirname, 'public'),
+        publicPath: '/assets/',
+        allowedHosts: [
+            '.pterodactyl.test',
+        ],
+        headers: {
+            'Access-Control-Allow-Origin': '*',
        },
    },
 };
--- a/yarn.lock
+++ b/yarn.lock