enable hmr

.gitignore

@@ -1,2 +1,3 @@
 assets/
 mix-manifest.json
+/hot

README.md

@@ -5,6 +5,7 @@ This is a starter theme for October CMS that includes:
 
 - Webpack (using Laravel Mix)
 - PostCSS
+- Hot module reloading
 
 To use it:
 

package.json

@@ -5,11 +5,13 @@
 		"development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --config=node_modules/laravel-mix/setup/webpack.config.js",
 		"watch": "npm run development -- --watch",
 		"watch-poll": "npm run watch -- --watch-poll",
-		"hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js",
+		"hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --hot --config=node_modules/laravel-mix/setup/webpack.config.js",
 		"prod": "npm run production",
 		"production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --config=node_modules/laravel-mix/setup/webpack.config.js"
 	},
 	"devDependencies": {
+		"browser-sync": "^2.26.14",
+		"browser-sync-webpack-plugin": "^2.2.2",
 		"cross-env": "^7.0.3",
 		"laravel-mix": "^6.0.13",
 		"postcss": "^8.2.8",

src/css/style.css

@@ -1,7 +1,7 @@
 /* css to go here */
 
 :root {
-	@mixin defineHex --test-hsl, #00ff00;
+	@mixin defineHex --test-hsl, #0000ff;
 }
 
 body {

webpack.mix.js

@@ -2,13 +2,9 @@ let mix = require('laravel-mix');
 
 mix.options({
         processCssUrls: false,
-        autoprefixer: {
+        hmrOptions: {
-            enabled: true,
+            host: 'october.home',
-            options: {
+            port: '8080'
-                overrideBrowserslist: ['last 2 versions', '> 1%'],
-                cascade: true,
-                grid: true,
-            }
         },
     })
     .setPublicPath('/')