Add webpack Vue 3 infection plugin for iterative migration

Illya Klymovrequested to merge
xanf/webpack-vue3-infection-plugin into master

What does this MR do and why?

Implements the webpack equivalent of the Vite Vue 3 infection plugin to enable per-entrypoint Vue 3 migration in webpack builds. When a JS file is imported with ?vue3, the plugin infects the entire dependency subtree — Vue ecosystem packages are redirected to their Vue 3 compat wrappers via CONTEXT_ALIASES while non-Vue imports get separate module instances through ?vue3 resource query appending.

Key changes

  • config/plugins/webpack_vue3_infection_plugin.js (new): Webpack 4 plugin using normalModuleFactory beforeResolve/afterResolve hooks with WeakSet-based dependency tracking for reliable infection propagation across the resolve pipeline
  • config/helpers/context_aliases_shared.js: Extract INFECTABLE_RE and INFECTION_BLOCKLIST from the Vite plugin so both plugins share identical infection rules
  • config/helpers/vite_plugin_vue3_infection.mjs: Import shared constants instead of defining them locally
  • config/webpack.config.js: Enable plugin conditionally when !USE_VUE3, matching the Vite plugin's activation condition

How infection works in webpack

  1. beforeResolve: Detects ?vue3 query on import requests (infection roots) or checks if the importer is already infected via a tracked Set. Rewrites Vue ecosystem imports to CONTEXT_ALIASES targets. Skips inline-loader requests (containing !) and vue-loader sub-requests (?vue&type=...) to avoid infecting webpack/loader internals.
  2. afterResolve: For infected dependencies, appends ?vue3 to the resolved resource, creating separate webpack module instances (webpack deduplicates by request which includes the query string).
  3. finishModules: Reports infection stats (total, infected, duplicated module counts).

How to set up and validate locally

  1. Add ?vue3 infection to an entrypoint:
--- a/app/assets/javascripts/pages/groups/work_items/index.js
+++ b/app/assets/javascripts/pages/groups/work_items/index.js
 import { NAMESPACE_GROUP } from '~/issues/constants';
-import { initWorkItemsRoot } from '~/work_items';
+import { initWorkItemsRoot } from '~/work_items?vue3';
  1. Ensure gdk stop vite (falls back to webpack)
  2. Open the page — check console for [vue3-infection] stats showing infected module count > 0
  3. Verify no Critical dependency warnings related to the infection

MR acceptance checklist

Evaluate this MR against the MR acceptance checklist. It helps you analyze changes to reduce risks in quality, performance, reliability, security, and maintainability.

Merge request reports