diff --git a/packages/kit/src/build.ts b/packages/kit/src/build.ts index 1ad1ad8b4f..c8cb90c3fa 100644 --- a/packages/kit/src/build.ts +++ b/packages/kit/src/build.ts @@ -106,9 +106,11 @@ export function extendViteConfig ( /** * Append webpack plugin to the config. */ -export function addWebpackPlugin (plugin: WebpackPluginInstance | WebpackPluginInstance[], options?: ExtendWebpackConfigOptions) { - const method: 'push' | 'unshift' = options?.prepend ? 'unshift' : 'push' +export function addWebpackPlugin (pluginOrGetter: WebpackPluginInstance | WebpackPluginInstance[] | (() => WebpackPluginInstance | WebpackPluginInstance[]), options?: ExtendWebpackConfigOptions) { extendWebpackConfig((config) => { + const method: 'push' | 'unshift' = options?.prepend ? 'unshift' : 'push' + const plugin = typeof pluginOrGetter === 'function' ? pluginOrGetter() : pluginOrGetter + config.plugins = config.plugins || [] if (Array.isArray(plugin)) { config.plugins[method](...plugin) @@ -121,9 +123,11 @@ export function addWebpackPlugin (plugin: WebpackPluginInstance | WebpackPluginI /** * Append Vite plugin to the config. */ -export function addVitePlugin (plugin: VitePlugin | VitePlugin[], options?: ExtendViteConfigOptions) { - const method: 'push' | 'unshift' = options?.prepend ? 'unshift' : 'push' +export function addVitePlugin (pluginOrGetter: VitePlugin | VitePlugin[] | (() => VitePlugin | VitePlugin[]), options?: ExtendViteConfigOptions) { extendViteConfig((config) => { + const method: 'push' | 'unshift' = options?.prepend ? 'unshift' : 'push' + const plugin = typeof pluginOrGetter === 'function' ? pluginOrGetter() : pluginOrGetter + config.plugins = config.plugins || [] if (Array.isArray(plugin)) { config.plugins[method](...plugin) diff --git a/packages/nuxt/src/core/nuxt.ts b/packages/nuxt/src/core/nuxt.ts index ee55729ca0..d1a0bfa160 100644 --- a/packages/nuxt/src/core/nuxt.ts +++ b/packages/nuxt/src/core/nuxt.ts @@ -78,17 +78,17 @@ async function initNuxt (nuxt: Nuxt) { exclude: [join(nuxt.options.rootDir, 'index.html')], patterns: vueAppPatterns(nuxt) } - addVitePlugin(ImportProtectionPlugin.vite(config)) - addWebpackPlugin(ImportProtectionPlugin.webpack(config)) + addVitePlugin(() => ImportProtectionPlugin.vite(config)) + addWebpackPlugin(() => ImportProtectionPlugin.webpack(config)) if (nuxt.options.experimental.localLayerAliases) { // Add layer aliasing support for ~, ~~, @ and @@ aliases - addVitePlugin(LayerAliasingPlugin.vite({ + addVitePlugin(() => LayerAliasingPlugin.vite({ sourcemap: nuxt.options.sourcemap.server || nuxt.options.sourcemap.client, // skip top-level layer (user's project) as the aliases will already be correctly resolved layers: nuxt.options._layers.slice(1) })) - addWebpackPlugin(LayerAliasingPlugin.webpack({ + addWebpackPlugin(() => LayerAliasingPlugin.webpack({ sourcemap: nuxt.options.sourcemap.server || nuxt.options.sourcemap.client, // skip top-level layer (user's project) as the aliases will already be correctly resolved layers: nuxt.options._layers.slice(1), @@ -102,8 +102,8 @@ async function initNuxt (nuxt: Nuxt) { sourcemap: nuxt.options.sourcemap.server || nuxt.options.sourcemap.client, transformerOptions: nuxt.options.optimization.asyncTransforms } - addVitePlugin(UnctxTransformPlugin.vite(options)) - addWebpackPlugin(UnctxTransformPlugin.webpack(options)) + addVitePlugin(() => UnctxTransformPlugin.vite(options)) + addWebpackPlugin(() => UnctxTransformPlugin.webpack(options)) // Add composable tree-shaking optimisations const serverTreeShakeOptions: TreeShakeComposablesPluginOptions = { @@ -111,23 +111,23 @@ async function initNuxt (nuxt: Nuxt) { composables: nuxt.options.optimization.treeShake.composables.server } if (Object.keys(serverTreeShakeOptions.composables).length) { - addVitePlugin(TreeShakeComposablesPlugin.vite(serverTreeShakeOptions), { client: false }) - addWebpackPlugin(TreeShakeComposablesPlugin.webpack(serverTreeShakeOptions), { client: false }) + addVitePlugin(() => TreeShakeComposablesPlugin.vite(serverTreeShakeOptions), { client: false }) + addWebpackPlugin(() => TreeShakeComposablesPlugin.webpack(serverTreeShakeOptions), { client: false }) } const clientTreeShakeOptions: TreeShakeComposablesPluginOptions = { sourcemap: nuxt.options.sourcemap.client, composables: nuxt.options.optimization.treeShake.composables.client } if (Object.keys(clientTreeShakeOptions.composables).length) { - addVitePlugin(TreeShakeComposablesPlugin.vite(clientTreeShakeOptions), { server: false }) - addWebpackPlugin(TreeShakeComposablesPlugin.webpack(clientTreeShakeOptions), { server: false }) + addVitePlugin(() => TreeShakeComposablesPlugin.vite(clientTreeShakeOptions), { server: false }) + addWebpackPlugin(() => TreeShakeComposablesPlugin.webpack(clientTreeShakeOptions), { server: false }) } }) if (!nuxt.options.dev) { // DevOnly component tree-shaking - build time only - addVitePlugin(DevOnlyPlugin.vite({ sourcemap: nuxt.options.sourcemap.server || nuxt.options.sourcemap.client })) - addWebpackPlugin(DevOnlyPlugin.webpack({ sourcemap: nuxt.options.sourcemap.server || nuxt.options.sourcemap.client })) + addVitePlugin(() => DevOnlyPlugin.vite({ sourcemap: nuxt.options.sourcemap.server || nuxt.options.sourcemap.client })) + addWebpackPlugin(() => DevOnlyPlugin.webpack({ sourcemap: nuxt.options.sourcemap.server || nuxt.options.sourcemap.client })) } // TODO: [Experimental] Avoid emitting assets when flag is enabled diff --git a/packages/nuxt/src/imports/module.ts b/packages/nuxt/src/imports/module.ts index acca6057b7..8910b40aa7 100644 --- a/packages/nuxt/src/imports/module.ts +++ b/packages/nuxt/src/imports/module.ts @@ -81,8 +81,8 @@ export default defineNuxtModule>({ nuxt.options.alias['#imports'] = join(nuxt.options.buildDir, 'imports') // Transform to inject imports in production mode - addVitePlugin(TransformPlugin.vite({ ctx, options, sourcemap: nuxt.options.sourcemap.server || nuxt.options.sourcemap.client })) - addWebpackPlugin(TransformPlugin.webpack({ ctx, options, sourcemap: nuxt.options.sourcemap.server || nuxt.options.sourcemap.client })) + addVitePlugin(() => TransformPlugin.vite({ ctx, options, sourcemap: nuxt.options.sourcemap.server || nuxt.options.sourcemap.client })) + addWebpackPlugin(() => TransformPlugin.webpack({ ctx, options, sourcemap: nuxt.options.sourcemap.server || nuxt.options.sourcemap.client })) const priorities = nuxt.options._layers.map((layer, i) => [layer.config.srcDir, -i] as const).sort(([a], [b]) => b.length - a.length) diff --git a/packages/nuxt/src/pages/module.ts b/packages/nuxt/src/pages/module.ts index 8997954d9a..b19e528e1e 100644 --- a/packages/nuxt/src/pages/module.ts +++ b/packages/nuxt/src/pages/module.ts @@ -157,8 +157,8 @@ export default defineNuxtModule({ ) } nuxt.hook('modules:done', () => { - addVitePlugin(PageMetaPlugin.vite(pageMetaOptions)) - addWebpackPlugin(PageMetaPlugin.webpack(pageMetaOptions)) + addVitePlugin(() => PageMetaPlugin.vite(pageMetaOptions)) + addWebpackPlugin(() => PageMetaPlugin.webpack(pageMetaOptions)) }) // Add prefetching support for middleware & layouts diff --git a/test/fixtures/basic/nuxt.config.ts b/test/fixtures/basic/nuxt.config.ts index 8377002374..59b947e0f7 100644 --- a/test/fixtures/basic/nuxt.config.ts +++ b/test/fixtures/basic/nuxt.config.ts @@ -106,8 +106,8 @@ export default defineNuxtConfig({ if (id === 'virtual.css') { return ':root { --virtual: red }' } } })) - addVitePlugin(plugin.vite()) - addWebpackPlugin(plugin.webpack()) + addVitePlugin(() => plugin.vite()) + addWebpackPlugin(() => plugin.webpack()) }, function (_options, nuxt) { const routesToDuplicate = ['/async-parent', '/fixed-keyed-child-parent', '/keyed-child-parent', '/with-layout', '/with-layout2']