I have a clean Wordpress installation.
When I run yarn build everything works like a dream. Running yarn dev however does not seem to load the javascript file, or any of the styles.
According to the docs, the JS/CSS should be injected without further configuration. They are missing however.
Do I need to load HMR manually? Do I need extra configuration for BrowserSync?
Currently I am loading my index.js and index.css through the native wordpress wp_enqueue_script() function. Should I do it another way?
This is my structure (simplified and reduced)
my-template/
├─ node_modules/
├─ dist/
│ ├─ mainfest.json
│ ├─ index.js
│ ├─ index.css
├─ src/
│ ├─ fonts/
│ ├─ styles/
│ ├─ images/
│ ├─ scripts/
│ │ ├─ index.js
├─ package.json
├─ bud.config.js
package.json
{
"name": "starter",
"version": "1.0.0",
"description": "starter theme",
"main": "index.js",
"repository": "git@github.com:example",
"author": "mail@example.com",
"license": "MIT",
"engines": {
"node": ">=18.4.0"
},
"scripts": {
"dev": "bud dev",
"build": "bud build"
},
"devDependencies": {
"@roots/bud": "^6.0.0",
"@roots/bud-postcss": "^6.0.0",
"@roots/bud-preset-wordpress": "^6.0.0",
"@roots/bud-sass": "^6.0.0",
"@roots/wordpress-hmr": "^6.0.0"
}
}
bud.config.js
/**
* @typedef {import('@roots/bud').Bud} bud
*
* @param {bud} app
*/
module.exports = async (app) => {
app
/**
* Application entrypoints
*
* Paths are relative to your resources directory
* meaning of the "@" symbol https://stackoverflow.com/a/42711271/7262739
*/
.entry({
index: ['@src/scripts/index.js', '@src/styles/main.scss'],
})
/**
* These files should be processed as part of the build
* even if they are not explicitly imported in application assets.
*/
.assets('fonts', 'images')
/**
* These files will trigger a full page reload
* when modified.
*/
.watch('@src/**/*')
/**
* Target URL to be proxied by the dev server.
*
* This should be the URL you use to visit your local development server.
*/
.proxy('http://localhost/')
/**
* Development URL to be used in the browser.
*/
.serve('http://localhost:3010/starter/')
};
index.js
/**
* app.main
*/
const main = async (err) => {
if (err) {
// handle hmr errors
console.error(err);
}
// application code
app();
/**
* Initialize
*
* @see https://webpack.js.org/api/hot-module-replacement
*/
// domReady(main);
import.meta.webpackHot?.accept(main);
};
/**
* Now runs without HMR too
*/
const app = () => {
document.addEventListener("DOMContentLoaded", function (event) {
console.log('RUNS')
});
}
app();
index.scss: tried empty file, didn’t change anything. So I don’t expect it to have silent errors blocking it.