Better support for CSS and JS

Author: DaneEveritt

.babelrc

@@ -1,6 +1,7 @@
 {
   "presets": [
-    "@babel/preset-env"
+    "@babel/preset-env",
+    "minify"
   ],
   "plugins": [
     "@babel/plugin-proposal-object-rest-spread"

app/Services/Helpers/AssetHashService.php

@@ -58,8 +58,25 @@ public function __construct(Application $application, CacheRepository $cache, Fi
     public function url(string $resource): string
     {
         $file = last(explode('/', $resource));
+        $data = array_get($this->manifest(), $file, $file);
 
-        return '/' . ltrim(str_replace($file, array_get($this->manifest(), $file, $file), $resource), '/');
+        return '/' . ltrim(str_replace($file, array_get($data, 'src', $file), $resource), '/');
+    }
+
+    /**
+     * Return the data integrity hash for a resource.
+     *
+     * @param string $resource
+     * @return string
+     *
+     * @throws \Illuminate\Contracts\Filesystem\FileNotFoundException
+     */
+    public function integrity(string $resource): string
+    {
+        $file = last(explode('/', $resource));
+        $data = array_get($this->manifest(), $file, $file);
+
+        return array_get($data, 'integrity', '');
     }
 
     /**
@@ -72,7 +89,11 @@ public function url(string $resource): string
      */
     public function css(string $resource): string
     {
-        return '<link href="' . $this->url($resource) . '" rel="stylesheet preload" crossorigin="anonymous" referrerpolicy="no-referrer">';
+        return '<link href="' . $this->url($resource) . '"
+                    rel="stylesheet preload"
+                    crossorigin="anonymous"
+                    integrity="' . $this->integrity($resource) . '"
+                    referrerpolicy="no-referrer">';
     }
 
     /**
@@ -85,7 +106,9 @@ public function css(string $resource): string
      */
     public function js(string $resource): string
     {
-        return '<script src="' . $this->url($resource) . '" crossorigin="anonymous"></script>';
+        return '<script src="' . $this->url($resource) . '"
+                    integrity="' . $this->integrity($resource) . '"
+                    crossorigin="anonymous"></script>';
     }
 
     /**

resources/themes/pterodactyl/templates/wrapper.blade.php

@@ -10,7 +10,7 @@
         @show
 
         @section('assets')
-            {!! $asset->css('assets/bundle.css') !!}
+            {!! $asset->css('main.css') !!}
         @show
 
         @include('layouts.scripts')
@@ -24,7 +24,7 @@
             @yield('below-container')
         @show
         @section('scripts')
-            {!! $asset->js('assets/bundle.js') !!}
+            {!! $asset->js('main.js') !!}
         @show
     </body>
 </html>

webpack.config.js

@@ -1,9 +1,9 @@
 const path = require('path');
+const AssetsManifestPlugin = require('webpack-assets-manifest');
 const CleanPlugin = require('clean-webpack-plugin');
 const ExtractTextPlugin = require('extract-text-webpack-plugin');
-const ManifestPlugin = require('webpack-manifest-plugin');
 const ShellPlugin = require('webpack-shell-plugin');
-const UglifyJsPLugin = require('uglifyjs-webpack-plugin');
+const MinifyPlugin = require('babel-minify-webpack-plugin');
 
 module.exports = {
     mode: 'development',
@@ -36,19 +36,22 @@ module.exports = {
             {
                 test: /\.js$/,
                 include: [
-                    path.resolve(__dirname, 'resources/assets/scripts'),
+                    path.resolve(__dirname, 'resources'),
                 ],
                 loader: 'babel-loader',
             },
             {
                 test: /\.css$/,
                 include: [
-                    path.resolve(__dirname, 'resources/assets/styles'),
+                    path.resolve(__dirname, 'resources'),
                 ],
                 use: ExtractTextPlugin.extract({
                     fallback: 'style-loader',
-                    use: ['css-loader', {
-                        loader:  'postcss-loader',
+                    use: [{
+                        loader: 'css-loader',
+                        options: {importLoaders: 1},
+                    }, {
+                        loader: 'postcss-loader',
                         options: {
                             ident: 'postcss',
                             plugins: [
@@ -80,18 +83,19 @@ module.exports = {
         new ExtractTextPlugin('bundle-[chunkhash].css', {
             allChunks: true,
         }),
-        new UglifyJsPLugin({
+        new MinifyPlugin({
+            mangle: {topLevel: true},
+        }, {
             include: [
-                path.resolve(__dirname, 'resources/assets/scripts'),
+                path.resolve(__dirname, 'resources'),
+                path.resolve(__dirname, 'node_modules'),
             ],
-            parallel: 2,
-            sourceMap: false,
-            uglifyOptions: {
-                ecma: 5,
-                toplevel: true,
-                safari10: true,
-            }
         }),
-        new ManifestPlugin(),
+        new AssetsManifestPlugin({
+            writeToDisk: true,
+            publicPath: true,
+            integrity: true,
+            integrityHashes: ['sha384'],
+        }),
     ]
 };