wp-build-toolslisted

Use when setting up, configuring, or debugging the JavaScript/CSS build pipeline for a WordPress plugin — @wordpress/scripts, webpack (webpack.config.js, entry points, externals), Vite, block editor asset compilation with block.json, enqueueing built assets with .asset.php dependency files, wp_enqueue_script / wp_localize_script, Sass/SCSS/PostCSS compilation, TypeScript support, register_block_type, or reusing a JS/CSS library already bundled by a host plugin (EDD, WooCommerce, Elementor). Triggers: "npm run build fails", "webpack config error", "my script is not loading", "set up @wordpress/scripts", "enqueue my block assets", "why is my CSS not compiling", ".asset.php not found", "how do I reuse this bundled library", "TypeScript in a WP plugin", "block.json attributes", "missing dependency in build", "wp_enqueue_script not loading", "externals in webpack", "Vite for WordPress", "Sass not compiling", "PostCSS setup", "build output is in the wrong folder", "npm ci vs npm install", "externalize React from my
mralaminahamed/wp-dev-skills · ★ 27 · Web & Frontend · score 77

Install: claude install-skill mralaminahamed/wp-dev-skills

# WordPress Plugin Build Tools > **Model note:** Config setup and `.asset.php` enqueue patterns are mechanical — `haiku` covers most cases. Debugging webpack entry-point conflicts or reusing a dependency plugin's bundled library may need `sonnet`. Configure and operate the JS/CSS build pipeline for WordPress plugins: `@wordpress/scripts` (webpack-based), Vite alternative, asset manifest handling, and correct enqueuing with the generated `.asset.php` dependency file. ## When to use - "Set up `@wordpress/scripts`", "configure webpack for my plugin". - "Build blocks and admin scripts", "compile Sass for a plugin". - "Why isn't my JS loading?", "fix asset enqueue with versioned hash". - "Switch from @wordpress/scripts to Vite". - "Set up separate entry points for front-end vs admin vs block editor". **Not for:** Block registration, `block.json` structure, or Gutenberg API — use the official `wp-block-development` skill. PHP-side REST API — use `wp-rest-api`. ## Method ### 1. Install @wordpress/scripts ```bash npm install --save-dev @wordpress/scripts ``` **`package.json`:** ```json { "scripts": { "build": "wp-scripts build", "start": "wp-scripts start", "lint:js": "wp-scripts lint-js", "lint:css": "wp-scripts lint-style" } } ``` Default entry point: `src/index.js` → `build/index.js` + `build/index.asset.php`. ### 2. Multiple entry points Create `webpack.config.js` at plugin root to override the default entry: ```js const defaultConfig = requir