Fix support for hot reloading without requiring anything special in the app

Author: DaneEveritt

app/Services/Helpers/AssetHashService.php

@@ -60,7 +60,7 @@ public function url(string $resource): string
         $file = last(explode('/', $resource));
         $data = array_get($this->manifest(), $file, $file);
 
-        return '/' . ltrim(str_replace($file, array_get($data, 'src', $file), $resource), '/');
+        return str_replace($file, array_get($data, 'src', $file), $resource);
     }
 
     /**

package.json

@@ -47,7 +47,6 @@
         "webpack-hot-client": "^4.0.2",
         "webpack-manifest-plugin": "^2.0.3",
         "webpack-serve": "^1.0.2",
-        "webpack-serve-waitpage": "^1.0.0",
         "webpack-shell-plugin": "^0.5.0",
         "webpack-stream": "^4.0.3"
     },
@@ -56,6 +55,6 @@
         "watch": "NODE_ENV=development ./node_modules/.bin/webpack --watch --progress",
         "build": "NODE_ENV=development ./node_modules/.bin/webpack --progress",
         "build:release": "NODE_ENV=production ./node_modules/.bin/webpack",
-        "serve": "NODE_ENV=development webpack-serve --config ./webpack.config.js"
+        "serve": "NODE_ENV=development webpack-serve --hot --config ./webpack.config.js"
     }
 }

resources/assets/scripts/app.js

@@ -30,6 +30,10 @@ Vue.use(vuexI18n.plugin, store);
 Vue.i18n.add('en', Locales.en);
 Vue.i18n.set('en');
 
+if (module.hot) {
+    module.hot.accept();
+}
+
 const router = new VueRouter({
     mode: 'history', routes
 });

webpack.config.js

@@ -1,3 +1,4 @@
+const _ = require('lodash');
 const path = require('path');
 const tailwind = require('tailwindcss');
 const glob = require('glob-all');
@@ -8,8 +9,6 @@ const ExtractTextPlugin = require('extract-text-webpack-plugin');
 const ShellPlugin = require('webpack-shell-plugin');
 const PurgeCssPlugin = require('purgecss-webpack-plugin');
 const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
-const HTMLWebpackPlugin = require('html-webpack-plugin');
-const WebpackServeWaitpage = require('webpack-serve-waitpage');
 
 // Custom PurgeCSS extractor for Tailwind that allows special characters in
 // class names.
@@ -29,7 +28,7 @@ const basePlugins = [
             'php artisan ziggy:generate resources/assets/scripts/helpers/ziggy.js',
         ],
     }),
-    new ExtractTextPlugin('assets/bundle.css', {
+    new ExtractTextPlugin('bundle-[hash].css', {
         allChunks: true,
     }),
     new AssetsManifestPlugin({
@@ -38,10 +37,6 @@ const basePlugins = [
         integrity: true,
         integrityHashes: ['sha384'],
     }),
-    new HTMLWebpackPlugin({
-        template: './resources/assets/index.html',
-        filename: 'index.html',
-    })
 ];
 
 const productionPlugins = [
@@ -77,9 +72,9 @@ module.exports = {
     // Passing an array loads them all but only exports the last.
     entry: ['./resources/assets/styles/main.css', './resources/assets/scripts/app.js'],
     output: {
-        path: path.resolve(__dirname, 'public'),
-        filename: 'assets/bundle.js',
-        publicPath: '/',
+        path: path.resolve(__dirname, 'public/assets'),
+        filename: 'bundle-[hash].js',
+        publicPath: _.get(process.env, 'PUBLIC_PATH', '') + '/assets/',
         crossOriginLoading: 'anonymous',
     },
     module: {
@@ -133,19 +128,16 @@ module.exports = {
     },
     plugins: process.env.NODE_ENV === 'production' ? basePlugins.concat(productionPlugins) : basePlugins,
     serve: {
-        host: "0.0.0.0",
         content: "./public/",
         dev: {
-            publicPath: "/"
-        },
-        hot: {
-            host: {
-                server: "0.0.0.0",
-                client: "192.168.50.2"
+            publicPath: "/assets/",
+            headers: {
+                "Access-Control-Allow-Origin": "*",
             }
         },
-        add (app, middleware, options) {
-            app.use(WebpackServeWaitpage(options, {theme: 'dark'}));
+        hot: {
+            hmr: true,
+            reload: true,
         }
     }
 };