Plaudit Webpack Extensions

A webpack configuration and plugin suite designed specifically for WordPress development workflows. This package extends @wordpress/scripts with custom webpack plugins, PostCSS configurations, and build optimizations tailored for Plaudit's WordPress projects. It includes specialized handling for Gutenberg blocks, asset management, internationalization (WPML), and a same-origin CSS-inject / live-reload client for wp-scripts start.

Requirements

• All block- and extension-related capabilities require that the plaudit/plaudit-common composer library be installed.
• All assets must be under a unified root directory and must be emitted to a unified output directory
  • Ex: src/blocks and src/extensions emitting to dist/blocks and dist/extensions

Perks

Truly automatic asset loading

With the useUnifiedLoader flag enabled (see the usage example), this package will generate a single file that, when included, automatically registers and enqueues scripts, styles, and assets. This includes prefetching assets when the useWebpackResourceFiltering flag is enabled.

Automatic filename mapping in block.json

Instead of requiring developers to plug in the built names of files when developing blocks, this suite will automatically replace the source name with the built name in emitted block.json files and will automatically resolve filename conflicts that would otherwise cause the build to fail.

In addition to handling filename conflicts, it also automatically detects the presence of template.php and template.twig files and ensures that they are properly registered in the emitted block.json files.

Efficient loading

This suite generates loader code that uses the most efficient mechanisms available for registering assets, and, in the case of blocks in themes, a loading mechanism that is more efficient than any "available" method.

Unified Plugin and Theme Structures

The same file structure (both in the webpack.config.js file and the actual directory tree) can be used in plugins and themes.

Usage

Config, entry types, and handles: User Guide.

dist vs dist-dev

With the unified loader (site standard), outputDir is dist. When SERVER_MODE is development (the default if unset on the host) and omitDistDev is off, webpack writes dist-dev. WordPress in development loads that folder via dist/unified-loader.php when dist-dev/unified-loader.php exists. Production WordPress always uses dist.

SERVER_MODE chooses the folder. The compiler (mode, minify, webpack cache) is always production for dist. For dist-dev it follows NODE_ENV: wp-scripts start is development (no minify, cache on); wp-scripts build is production (minify, cache off) still written to dist-dev.

dev-reload.js / overlay run only for pnpm run dev (BROWSER_SYNC + watch) and only under dist-dev. Pass --no-dev-reload after -- (or DEV_RELOAD=0) to skip the overlay and live reload: pnpm run dev -- --no-dev-reload. Docker still starts and the browser still opens. The -- is required so webpack-cli does not treat the flag as an unknown option.

| Command | Folder | Compiler | Overlay | |-----------------------------------------|------------|------------------------------------------------------------------|---------| | pnpm run dev | dist-dev | development (no minify, cache on) | yes | | pnpm run dev -- --no-dev-reload | dist-dev | development (no minify, cache on) | no | | pnpm run watch | dist-dev | development (no minify, cache on) | no | | pnpm run build | dist-dev | production (minify, cache off) | no | | SERVER_MODE=production pnpm run build | dist | same production compiler as pnpm run build (minify, cache off) | no |

The last row is the same compile as a local build; only the folder changes. That is what ships: @plaudit/toolbox (toolbox init) installs a pre-commit hook that runs pnpm … build with SERVER_MODE=production and stages wp-content/**/dist/**. A plain pnpm run build on your machine does not update dist unless you set SERVER_MODE yourself. SKIP_BUILD=1 skips the hook build.

See Plaudit - Dev Webpack Plugin for more details

Development

Setup

pnpm install

Build

pnpm build

To Deploy

publish-pnpm-package