dot-skills Webpack 5 Plugins Best Practices

Comprehensive guide for writing correct, performant webpack 5 plugins. Contains 44 rules across 8 categories (8 hook + 7 asset + 5 cache + 5 life + 4 schema + 5 diag + 5 perf + 5 compat = 44), ordered by the authoring lifecycle: hook choice is the foundation, then asset manipulation, then caching/watch-mode correctness, then lifecycle hygiene, then user-facing concerns (schema validation, error reporting), then performance, then packaging.

Patterns are derived from webpack/webpack, the webpack-contrib plugin suite (mini-css-extract, terser, compression, copy, css-minimizer), and Next.js's webpack integration in vercel/next.js.

When to Apply

Reference these rules whenever:

• Writing a new plugin (defining apply(compiler), picking which hook to tap)
• Reviewing existing plugin code for correctness or performance
• Debugging "why isn't my plugin's output showing up" — usually a hook/stage mismatch
• Adding asset manipulation logic (processAssets, emitAsset, updateAsset)
• Fixing watch-mode staleness or persistent-cache poisoning
• Migrating a plugin from webpack 4 to webpack 5 (or supporting both)
• Publishing a plugin to npm (export shape, peerDependencies, schema)

Rule Categories by Priority