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

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,
         }
     }
 };