update readme

.gitignore

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

README.md

@@ -1,27 +1,22 @@
-October CMS Webpack Theme Boilerplate
+# October CMS Webpack Theme Boilerplate
-==========
 
 This is a starter theme for October CMS that includes:
 
-- Webpack (using Laravel Mix)
+- Webpack (using [Laravel Mix](https://laravel.com/docs/8.x/mix))
 - PostCSS
+- Hot module reloading
 
 To use it:
 
-- [Install October CMS](https://octobercms.com/docs/setup/installation)
+- [Install October CMS](https://octobercms.com/docs/setup/installation).
-- Clone the repo in your theme directory
+- Clone the repo in October's `themes` directory.
-- Inside cloned directory run `npm install` (node_modules folder will be created)
+- Inside cloned directory run `npm install`.
-- Install more packages using `npm install --save`
+- Install more packages using `npm install --save`.
-- Require your installed packages in src/js/app.js
+- Require your installed packages in `src/js/app.js`.
-- Modify the js and css files
+- Run `npm run dev` (`npm run watch` to recompile when something changes, `npm run hot` to enable HMR).
-- Run `npm run dev` (`npm run watch` to recompile when something changes)
+- Run `npm run prod` to compile for production.
-- [Add new pages, partials, content files...](https://octobercms.com/docs/cms/themes)
 
-When you are ready for production:
+## To enable the Ajax framework
-
-- Run `npm run prod`
-
-## To add ajax framework
 
 ```sh
 npm install jquery

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"
+		"production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --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('/')