.gitignore

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

README.md

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

package.json

@@ -5,13 +5,11 @@
 		"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 --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 --inline --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 --config=node_modules/laravel-mix/setup/webpack.config.js"
+		"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, #0000ff;
+	@mixin defineHex --test-hsl, #00ff00;
 }
 
 body {

webpack.mix.js

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