Assets

Since v2.0, WP Bones compiles your plugin assets with a single webpack.config.js built on top of @wordpress/scripts. The config auto-discovers every file under resources/assets/ — you drop a file in the right folder and yarn build picks it up.

Supported formats:

• Styles — CSS, LESS, Sass
• Scripts — JavaScript, TypeScript
• React apps — .jsx, .tsx (folder-based or single-file)

Install

yarn install

Build

One-shot production build:

yarn build

Watch mode during development:

yarn dev

Folder layout

Source tree under resources/assets/:

• resources/assets
  • apps
    • dashboard
      • index.tsxReact + TS (folder-based)
    • widget.tsxReact + TS (single-file)
  • css
    • admin.scssSass
    • frontend.lessLess
    • prism.cssCSS
  • js
    • helpers.tsTypeScript
    • prism.jsJavaScript

Compiled output under public/:

• public
  • apps
    • dashboard.jsReact bundle
    • dashboard.asset.phpDeps manifest
    • widget.jsReact bundle
  • css
    • admin.cssCSS
    • frontend.cssCSS
    • prism.cssCSS
  • js
    • helpers.jsJavaScript
    • prism.jsJavaScript

Commands

Adding a new React app

php bones make:app dashboard

Scaffolds resources/assets/apps/dashboard/index.tsx with a React 18 + TypeScript template. No package.json edits required — webpack auto-discovers the new entry.

See also webpack.config.js and package.json.