diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
index 5173da859417be..b1c663db40e80f 100644
--- a/.github/workflows/ci.yml
+++ b/.github/workflows/ci.yml
@@ -13,6 +13,8 @@ on:
       - feat/*
       - fix/*
       - perf/*
+      - v1
+      - v2
   pull_request:
   workflow_dispatch:
 
diff --git a/README.md b/README.md
index 546014a12c7116..a6f13829f2635f 100644
--- a/README.md
+++ b/README.md
@@ -35,6 +35,8 @@ In addition, Vite is highly extensible via its [Plugin API](https://vitejs.dev/g
 
 ## Packages
 
+> This branch is for the upcoming v3.0, if you are looking for current stable releases, check the [`v2` branch](https://github.com/vitejs/vite/tree/v2) instead.
+
 | Package                                           | Version (click for changelogs)                                                                                                       |
 | ------------------------------------------------- | :----------------------------------------------------------------------------------------------------------------------------------- |
 | [vite](packages/vite)                             | [![vite version](https://img.shields.io/npm/v/vite.svg?label=%20)](packages/vite/CHANGELOG.md)                                       |
diff --git a/docs/.vitepress/config.js b/docs/.vitepress/config.ts
similarity index 94%
rename from docs/.vitepress/config.js
rename to docs/.vitepress/config.ts
index ee76a29986d3fb..4659ea5ab7ae4f 100644
--- a/docs/.vitepress/config.js
+++ b/docs/.vitepress/config.ts
@@ -1,9 +1,6 @@
-// @ts-check
+import { defineConfig } from 'vitepress'
 
-/**
- * @type {import('vitepress').UserConfig}
- */
-module.exports = {
+export default defineConfig({
   title: 'Vite',
   description: 'Next Generation Frontend Tooling',
   head: [['link', { rel: 'icon', type: 'image/svg+xml', href: '/logo.svg' }]],
@@ -64,6 +61,15 @@ module.exports = {
           }
         ]
       },
+      {
+        text: 'v3 (next)',
+        items: [
+          {
+            text: 'v2.x (stable)',
+            link: 'https://v2.vitejs.dev'
+          }
+        ]
+      },
       {
         text: 'Languages',
         items: [
@@ -169,4 +175,4 @@ module.exports = {
       ]
     }
   }
-}
+})
diff --git a/docs/guide/api-plugin.md b/docs/guide/api-plugin.md
index 50353765261e34..76b9984a069828 100644
--- a/docs/guide/api-plugin.md
+++ b/docs/guide/api-plugin.md
@@ -305,6 +305,28 @@ Vite plugins can also provide hooks that serve Vite-specific purposes. These hoo
 
   Note `configureServer` is not called when running the production build so your other hooks need to guard against its absence.
 
+### `configurePreviewServer`
+
+- **Type:** `(server: { middlewares: Connect.Server, httpServer: http.Server }) => (() => void) | void | Promise<(() => void) | void>`
+- **Kind:** `async`, `sequential`
+
+  Same as [`configureServer`](/guide/api-plugin.html#configureserver) but for the preview server. It provides the [connect](https://github.com/senchalabs/connect) server and its underlying [http server](https://nodejs.org/api/http.html). Similarly to `configureServer`, the `configurePreviewServer` hook is called before other middlewares are installed. If you want to inject a middleware **after** other middlewares, you can return a function from `configurePreviewServer`, which will be called after internal middlewares are installed:
+
+  ```js
+  const myPlugin = () => ({
+    name: 'configure-preview-server',
+    configurePreviewServer(server) {
+      // return a post hook that is called after other middlewares are
+      // installed
+      return () => {
+        server.middlewares.use((req, res, next) => {
+          // custom handle request...
+        })
+      }
+    }
+  })
+  ```
+
 ### `transformIndexHtml`
 
 - **Type:** `IndexHtmlTransformHook | { enforce?: 'pre' | 'post', transform: IndexHtmlTransformHook }`
diff --git a/docs/guide/features.md b/docs/guide/features.md
index 1a8c03bbd0be22..01798ad0d4ea56 100644
--- a/docs/guide/features.md
+++ b/docs/guide/features.md
@@ -282,10 +282,10 @@ for (const path in modules) {
 }
 ```
 
-Matched files are by default lazy loaded via dynamic import and will be split into separate chunks during build. If you'd rather import all the modules directly (e.g. relying on side-effects in these modules to be applied first), you can use `import.meta.globEager` instead:
+Matched files are by default lazy-loaded via dynamic import and will be split into separate chunks during build. If you'd rather import all the modules directly (e.g. relying on side-effects in these modules to be applied first), you can pass `{ eager: true }` as the second argument:
 
 ```js
-const modules = import.meta.globEager('./dir/*.js')
+const modules = import.meta.glob('./dir/*.js', { eager: true })
 ```
 
 The above will be transformed into the following:
@@ -300,7 +300,9 @@ const modules = {
 }
 ```
 
-`import.meta.glob` and `import.meta.globEager` also support importing files as strings (similar to [Importing Asset as String](https://vitejs.dev/guide/assets.html#importing-asset-as-string)) with the [Import Reflection](https://github.com/tc39/proposal-import-reflection) syntax:
+### Glob Import As
+
+`import.meta.glob` also supports importing files as strings (similar to [Importing Asset as String](https://vitejs.dev/guide/assets.html#importing-asset-as-string)) with the [Import Reflection](https://github.com/tc39/proposal-import-reflection) syntax:
 
 ```js
 const modules = import.meta.glob('./dir/*.js', { as: 'raw' })
@@ -311,18 +313,115 @@ The above will be transformed into the following:
 ```js
 // code produced by vite
 const modules = {
-  './dir/foo.js': '{\n  "msg": "foo"\n}\n',
-  './dir/bar.js': '{\n  "msg": "bar"\n}\n'
+  './dir/foo.js': 'export default "foo"\n',
+  './dir/bar.js': 'export default "bar"\n'
+}
+```
+
+`{ as: 'url' }` is also supported for loading assets as URLs.
+
+### Multiple Patterns
+
+The first argument can be an array of globs, for example
+
+```js
+const modules = import.meta.glob(['./dir/*.js', './another/*.js'])
+```
+
+### Negative Patterns
+
+Negative glob patterns are also supported (prefixed with `!`). To ignore some files from the result, you can add exclude glob patterns to the first argument:
+
+```js
+const modules = import.meta.glob(['./dir/*.js', '!**/bar.js'])
+```
+
+```js
+// code produced by vite
+const modules = {
+  './dir/foo.js': () => import('./dir/foo.js')
+}
+```
+
+#### Named Imports
+
+It's possible to only import parts of the modules with the `import` options.
+
+```ts
+const modules = import.meta.glob('./dir/*.js', { import: 'setup' })
+```
+
+```ts
+// code produced by vite
+const modules = {
+  './dir/foo.js': () => import('./dir/foo.js').then((m) => m.setup),
+  './dir/bar.js': () => import('./dir/bar.js').then((m) => m.setup)
+}
+```
+
+When combined with `eager` it's even possible to have tree-shaking enabled for those modules.
+
+```ts
+const modules = import.meta.glob('./dir/*.js', { import: 'setup', eager: true })
+```
+
+```ts
+// code produced by vite:
+import { setup as __glob__0_0 } from './dir/foo.js'
+import { setup as __glob__0_1 } from './dir/bar.js'
+const modules = {
+  './dir/foo.js': __glob__0_0,
+  './dir/bar.js': __glob__0_1
+}
+```
+
+Set `import` to `default` to import the default export.
+
+```ts
+const modules = import.meta.glob('./dir/*.js', {
+  import: 'default',
+  eager: true
+})
+```
+
+```ts
+// code produced by vite:
+import __glob__0_0 from './dir/foo.js'
+import __glob__0_1 from './dir/bar.js'
+const modules = {
+  './dir/foo.js': __glob__0_0,
+  './dir/bar.js': __glob__0_1
+}
+```
+
+#### Custom Queries
+
+You can also use the `query` option to provide custom queries to imports for other plugins to consume.
+
+```ts
+const modules = import.meta.glob('./dir/*.js', {
+  query: { foo: 'bar', bar: true }
+})
+```
+
+```ts
+// code produced by vite:
+const modules = {
+  './dir/foo.js': () =>
+    import('./dir/foo.js?foo=bar&bar=true').then((m) => m.setup),
+  './dir/bar.js': () =>
+    import('./dir/bar.js?foo=bar&bar=true').then((m) => m.setup)
 }
 ```
 
+### Glob Import Caveats
+
 Note that:
 
 - This is a Vite-only feature and is not a web or ES standard.
 - The glob patterns are treated like import specifiers: they must be either relative (start with `./`) or absolute (start with `/`, resolved relative to project root) or an alias path (see [`resolve.alias` option](/config/#resolve-alias)).
-- The glob matching is done via `fast-glob` - check out its documentation for [supported glob patterns](https://github.com/mrmlnc/fast-glob#pattern-syntax).
-- You should also be aware that glob imports do not accept variables, you need to directly pass the string pattern.
-- The glob patterns cannot contain the same quote string (i.e. `'`, `"`, `` ` ``) as outer quotes, e.g. `'/Tom\'s files/**'`, use `"/Tom's files/**"` instead.
+- The glob matching is done via [`fast-glob`](https://github.com/mrmlnc/fast-glob) - check out its documentation for [supported glob patterns](https://github.com/mrmlnc/fast-glob#pattern-syntax).
+- You should also be aware that all the arguments in the `import.meta.glob` must be **passed as literals**. You can NOT use variables or expressions in them.
 
 ## WebAssembly
 
diff --git a/packages/playground/assets/__tests__/assets.spec.ts b/packages/playground/assets/__tests__/assets.spec.ts
index f1075f6fe1cb39..c63ffc7cc1c0c2 100644
--- a/packages/playground/assets/__tests__/assets.spec.ts
+++ b/packages/playground/assets/__tests__/assets.spec.ts
@@ -145,8 +145,8 @@ describe('css url() references', () => {
     expect(await getBg('.css-url-quotes-base64-inline')).toMatch(match)
     const icoMatch = isBuild ? `data:image/x-icon;base64` : `favicon.ico`
     const el = await page.$(`link.ico`)
-    const herf = await el.getAttribute('href')
-    expect(herf).toMatch(icoMatch)
+    const href = await el.getAttribute('href')
+    expect(href).toMatch(icoMatch)
   })
 
   test('multiple urls on the same line', async () => {
diff --git a/packages/playground/css/main.js b/packages/playground/css/main.js
index f728b0251066d1..90f74c96793c55 100644
--- a/packages/playground/css/main.js
+++ b/packages/playground/css/main.js
@@ -80,12 +80,14 @@ text('.inlined-code', inlined)
 
 // glob
 const glob = import.meta.glob('./glob-import/*.css')
-Promise.all(Object.keys(glob).map((key) => glob[key]())).then((res) => {
+Promise.all(
+  Object.keys(glob).map((key) => glob[key]().then((i) => i.default))
+).then((res) => {
   text('.imported-css-glob', JSON.stringify(res, null, 2))
 })
 
 // globEager
-const globEager = import.meta.globEager('./glob-import/*.css')
+const globEager = import.meta.glob('./glob-import/*.css', { eager: true })
 text('.imported-css-globEager', JSON.stringify(globEager, null, 2))
 
 import postcssSourceInput from './postcss-source-input.css?query=foo'
diff --git a/packages/playground/glob-import/__tests__/glob-import.spec.ts b/packages/playground/glob-import/__tests__/glob-import.spec.ts
index ebdf6c0ab29193..d738ccec1d4c97 100644
--- a/packages/playground/glob-import/__tests__/glob-import.spec.ts
+++ b/packages/playground/glob-import/__tests__/glob-import.spec.ts
@@ -42,7 +42,7 @@ const allResult = {
   },
   '/dir/index.js': {
     globWithAlias: {
-      './alias.js': {
+      '/dir/alias.js': {
         default: 'hi'
       }
     },
@@ -67,7 +67,7 @@ const rawResult = {
 }
 
 const relativeRawResult = {
-  '../glob-import/dir/baz.json': {
+  './dir/baz.json': {
     msg: 'baz'
   }
 }
diff --git a/packages/playground/glob-import/dir/index.js b/packages/playground/glob-import/dir/index.js
index fb87f69f0f3a61..ab298abed485b3 100644
--- a/packages/playground/glob-import/dir/index.js
+++ b/packages/playground/glob-import/dir/index.js
@@ -1,4 +1,4 @@
-const modules = import.meta.globEager('./*.(js|ts)')
-const globWithAlias = import.meta.globEager('@dir/al*.js')
+const modules = import.meta.glob('./*.(js|ts)', { eager: true })
+const globWithAlias = import.meta.glob('@dir/al*.js', { eager: true })
 
 export { modules, globWithAlias }
diff --git a/packages/playground/glob-import/dir/nested/bar.js b/packages/playground/glob-import/dir/nested/bar.js
index a2d2921cca80ad..bb23a5a141de8e 100644
--- a/packages/playground/glob-import/dir/nested/bar.js
+++ b/packages/playground/glob-import/dir/nested/bar.js
@@ -1,4 +1,4 @@
-const modules = import.meta.globEager('../*.json')
+const modules = import.meta.glob('../*.json', { eager: true })
 
 export const msg = 'bar'
 export { modules }
diff --git a/packages/playground/glob-import/index.html b/packages/playground/glob-import/index.html
index 64f456aeb4d6a2..8466a6d0495881 100644
--- a/packages/playground/glob-import/index.html
+++ b/packages/playground/glob-import/index.html
@@ -40,8 +40,9 @@
 </script>
 
 <script type="module">
-  const rawModules = import.meta.globEager('/dir/*.json', {
-    as: 'raw'
+  const rawModules = import.meta.glob('/dir/*.json', {
+    as: 'raw',
+    eager: true
   })
   const globraw = {}
   Object.keys(rawModules).forEach((key) => {
@@ -55,12 +56,10 @@
 </script>
 
 <script type="module">
-  const relativeRawModules = import.meta.globEager(
-    '../glob-import/dir/*.json',
-    {
-      as: 'raw'
-    }
-  )
+  const relativeRawModules = import.meta.glob('../glob-import/dir/*.json', {
+    as: 'raw',
+    eager: true
+  })
   const relativeGlobRaw = {}
   Object.keys(relativeRawModules).forEach((key) => {
     relativeGlobRaw[key] = JSON.parse(relativeRawModules[key])
diff --git a/packages/playground/nested-deps/test-package-b/node_modules/test-package-a/index.js b/packages/playground/nested-deps/test-package-b/node_modules/test-package-a/index.js
deleted file mode 100644
index 8b21e17752a5a6..00000000000000
--- a/packages/playground/nested-deps/test-package-b/node_modules/test-package-a/index.js
+++ /dev/null
@@ -1 +0,0 @@
-export default 'A@1.0.0'
diff --git a/packages/playground/nested-deps/test-package-b/node_modules/test-package-a/package.json b/packages/playground/nested-deps/test-package-b/node_modules/test-package-a/package.json
deleted file mode 100644
index ce18862474971d..00000000000000
--- a/packages/playground/nested-deps/test-package-b/node_modules/test-package-a/package.json
+++ /dev/null
@@ -1,5 +0,0 @@
-{
-  "name": "test-package-a",
-  "version": "1.0.0",
-  "main": "index.js"
-}
diff --git a/packages/playground/optimize-deps/index.html b/packages/playground/optimize-deps/index.html
index 521d54379863d9..d11383bfcb3e04 100644
--- a/packages/playground/optimize-deps/index.html
+++ b/packages/playground/optimize-deps/index.html
@@ -76,7 +76,7 @@ <h2>Reused variable names</h2>
 
 <script type="module">
   // test dep detection in globbed files
-  const globbed = import.meta.globEager('./glob/*.js')
+  const globbed = import.meta.glob('./glob/*.js', { eager: true })
 
   import { camelCase } from 'dep-linked'
   text('.deps-linked', camelCase('foo-bar-baz'))
diff --git a/packages/playground/ssr-react/src/App.jsx b/packages/playground/ssr-react/src/App.jsx
index 1c598add666efb..59e14cd5c3eea0 100644
--- a/packages/playground/ssr-react/src/App.jsx
+++ b/packages/playground/ssr-react/src/App.jsx
@@ -2,7 +2,7 @@ import { Link, Route, Switch } from 'react-router-dom'
 
 // Auto generates routes from files under ./pages
 // https://vitejs.dev/guide/features.html#glob-import
-const pages = import.meta.globEager('./pages/*.jsx')
+const pages = import.meta.glob('./pages/*.jsx', { eager: true })
 
 const routes = Object.keys(pages).map((path) => {
   const name = path.match(/\.\/pages\/(.*)\.jsx$/)[1]
diff --git a/packages/playground/worker/__tests__/es/es-worker.spec.ts b/packages/playground/worker/__tests__/es/es-worker.spec.ts
index 27f81b010df74f..61215f931c77dc 100644
--- a/packages/playground/worker/__tests__/es/es-worker.spec.ts
+++ b/packages/playground/worker/__tests__/es/es-worker.spec.ts
@@ -118,6 +118,6 @@ test('import.meta.glob in worker', async () => {
   expect(await page.textContent('.importMetaGlob-worker')).toMatch('["')
 })
 
-test('import.meta.globEager in worker', async () => {
+test('import.meta.glob with eager in worker', async () => {
   expect(await page.textContent('.importMetaGlobEager-worker')).toMatch('["')
 })
diff --git a/packages/playground/worker/__tests__/iife/worker.spec.ts b/packages/playground/worker/__tests__/iife/worker.spec.ts
index 16750a893cb073..f49666e4918a25 100644
--- a/packages/playground/worker/__tests__/iife/worker.spec.ts
+++ b/packages/playground/worker/__tests__/iife/worker.spec.ts
@@ -105,6 +105,6 @@ test('classic worker', async () => {
   expect(await page.textContent('.classic-shared-worker')).toMatch('A classic')
 })
 
-test('import.meta.globEager in worker', async () => {
+test('import.meta.glob eager in worker', async () => {
   expect(await page.textContent('.importMetaGlobEager-worker')).toMatch('["')
 })
diff --git a/packages/playground/worker/importMetaGlobEager.worker.js b/packages/playground/worker/importMetaGlobEager.worker.js
index 7947f65ab8c7f9..23245818ee7485 100644
--- a/packages/playground/worker/importMetaGlobEager.worker.js
+++ b/packages/playground/worker/importMetaGlobEager.worker.js
@@ -1,4 +1,4 @@
-const modules = import.meta.globEager('./modules/*js')
+const modules = import.meta.glob('./modules/*js', { eager: true })
 
 self.onmessage = function (e) {
   self.postMessage(Object.keys(modules))
diff --git a/packages/playground/worker/index.html b/packages/playground/worker/index.html
index b0c524305fc33e..eae8c44119e3a6 100644
--- a/packages/playground/worker/index.html
+++ b/packages/playground/worker/index.html
@@ -73,7 +73,7 @@ <h2 class="format-iife">format iife:</h2>
 <code class="classic-shared-worker"></code>
 
 <p>
-  use import.meta.globEager in iife worker
+  use import.meta.glob with eager in iife worker
   <span class="classname">.importMetaGlobEager-worker</span>
 </p>
 <code class="importMetaGlobEager-worker"></code>
diff --git a/packages/plugin-vue-jsx/index.js b/packages/plugin-vue-jsx/index.js
index 248270765d19a1..929f4fb44cd434 100644
--- a/packages/plugin-vue-jsx/index.js
+++ b/packages/plugin-vue-jsx/index.js
@@ -48,12 +48,6 @@ function vueJsxPlugin(options = {}) {
     name: 'vite:vue-jsx',
 
     config(config) {
-      const optionsApi = config.define
-        ? config.define.__VUE_OPTIONS_API__
-        : undefined
-      const devTools = config.define
-        ? config.define.__VUE_PROD_DEVTOOLS__
-        : undefined
       return {
         // only apply esbuild to ts files
         // since we are handling jsx and tsx now
@@ -61,8 +55,8 @@ function vueJsxPlugin(options = {}) {
           include: /\.ts$/
         },
         define: {
-          __VUE_OPTIONS_API__: optionsApi != null ? optionsApi : true,
-          __VUE_PROD_DEVTOOLS__: devTools != null ? devTools : false
+          __VUE_OPTIONS_API__: config.define?.__VUE_OPTIONS_API__ ?? true,
+          __VUE_PROD_DEVTOOLS__: config.define?.__VUE_PROD_DEVTOOLS__ ?? false
         }
       }
     },
diff --git a/packages/vite/LICENSE.md b/packages/vite/LICENSE.md
index 80feb7f95c6941..2b43883f1b2b67 100644
--- a/packages/vite/LICENSE.md
+++ b/packages/vite/LICENSE.md
@@ -3606,6 +3606,34 @@ Repository: git+https://github.com/dominikg/tsconfck.git
 
 ---------------------------------------
 
+## ufo
+License: MIT
+Repository: unjs/ufo
+
+> MIT License
+> 
+> Copyright (c) 2020 Nuxt Contrib
+> 
+> Permission is hereby granted, free of charge, to any person obtaining a copy
+> of this software and associated documentation files (the "Software"), to deal
+> in the Software without restriction, including without limitation the rights
+> to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+> copies of the Software, and to permit persons to whom the Software is
+> furnished to do so, subject to the following conditions:
+> 
+> The above copyright notice and this permission notice shall be included in all
+> copies or substantial portions of the Software.
+> 
+> THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+> IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+> FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+> AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+> LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+> OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+> SOFTWARE.
+
+---------------------------------------
+
 ## unpipe
 License: MIT
 By: Douglas Christopher Wilson
diff --git a/packages/vite/package.json b/packages/vite/package.json
index b508842619033e..2e930f0f1f6741 100644
--- a/packages/vite/package.json
+++ b/packages/vite/package.json
@@ -112,11 +112,12 @@
     "source-map-js": "^1.0.2",
     "source-map-support": "^0.5.21",
     "strip-ansi": "^6.0.1",
-    "strip-literal": "^0.2.0",
+    "strip-literal": "^0.3.0",
     "terser": "^5.13.1",
     "tsconfck": "^1.2.2",
     "tslib": "^2.4.0",
     "types": "link:./types",
+    "ufo": "^0.8.4",
     "ws": "^8.6.0"
   },
   "peerDependencies": {
diff --git a/packages/vite/src/node/__tests__/plugins/importGlob/__snapshots__/fixture.test.ts.snap b/packages/vite/src/node/__tests__/plugins/importGlob/__snapshots__/fixture.test.ts.snap
new file mode 100644
index 00000000000000..3b611c60c9cedc
--- /dev/null
+++ b/packages/vite/src/node/__tests__/plugins/importGlob/__snapshots__/fixture.test.ts.snap
@@ -0,0 +1,154 @@
+// Vitest Snapshot v1
+
+exports[`fixture > transform 1`] = `
+"import * as __vite_glob_1_0 from \\"./modules/a.ts\\"
+import * as __vite_glob_1_1 from \\"./modules/b.ts\\"
+import * as __vite_glob_1_2 from \\"./modules/index.ts\\"
+import { name as __vite_glob_3_0 } from \\"./modules/a.ts\\"
+import { name as __vite_glob_3_1 } from \\"./modules/b.ts\\"
+import { name as __vite_glob_3_2 } from \\"./modules/index.ts\\"
+import { default as __vite_glob_5_0 } from \\"./modules/a.ts?raw\\"
+import { default as __vite_glob_5_1 } from \\"./modules/b.ts?raw\\"
+import \\"../../../../../../types/importMeta\\";
+export const basic = {
+\\"./modules/a.ts\\": () => import(\\"./modules/a.ts\\"),
+\\"./modules/b.ts\\": () => import(\\"./modules/b.ts\\"),
+\\"./modules/index.ts\\": () => import(\\"./modules/index.ts\\")
+};
+export const basicEager = {
+\\"./modules/a.ts\\": __vite_glob_1_0,
+\\"./modules/b.ts\\": __vite_glob_1_1,
+\\"./modules/index.ts\\": __vite_glob_1_2
+};
+export const ignore = {
+\\"./modules/a.ts\\": () => import(\\"./modules/a.ts\\"),
+\\"./modules/b.ts\\": () => import(\\"./modules/b.ts\\")
+};
+export const namedEager = {
+\\"./modules/a.ts\\": __vite_glob_3_0,
+\\"./modules/b.ts\\": __vite_glob_3_1,
+\\"./modules/index.ts\\": __vite_glob_3_2
+};
+export const namedDefault = {
+\\"./modules/a.ts\\": () => import(\\"./modules/a.ts\\").then(m => m[\\"default\\"]),
+\\"./modules/b.ts\\": () => import(\\"./modules/b.ts\\").then(m => m[\\"default\\"]),
+\\"./modules/index.ts\\": () => import(\\"./modules/index.ts\\").then(m => m[\\"default\\"])
+};
+export const eagerAs = {
+\\"./modules/a.ts\\": __vite_glob_5_0,
+\\"./modules/b.ts\\": __vite_glob_5_1
+};
+export const excludeSelf = {
+\\"./sibling.ts\\": () => import(\\"./sibling.ts\\")
+};
+export const customQueryString = {
+\\"./sibling.ts\\": () => import(\\"./sibling.ts?custom\\")
+};
+export const customQueryObject = {
+\\"./sibling.ts\\": () => import(\\"./sibling.ts?foo=bar&raw=true\\")
+};
+export const parent = {
+
+};
+export const rootMixedRelative = {
+\\"/css.spec.ts\\": () => import(\\"../../css.spec.ts?url\\").then(m => m[\\"default\\"]),
+\\"/define.spec.ts\\": () => import(\\"../../define.spec.ts?url\\").then(m => m[\\"default\\"]),
+\\"/import.spec.ts\\": () => import(\\"../../import.spec.ts?url\\").then(m => m[\\"default\\"]),
+\\"/importGlob/fixture-b/a.ts\\": () => import(\\"../fixture-b/a.ts?url\\").then(m => m[\\"default\\"]),
+\\"/importGlob/fixture-b/b.ts\\": () => import(\\"../fixture-b/b.ts?url\\").then(m => m[\\"default\\"]),
+\\"/importGlob/fixture-b/index.ts\\": () => import(\\"../fixture-b/index.ts?url\\").then(m => m[\\"default\\"])
+};
+export const cleverCwd1 = {
+\\"./node_modules/framework/pages/hello.page.js\\": () => import(\\"./node_modules/framework/pages/hello.page.js\\")
+};
+export const cleverCwd2 = {
+\\"./modules/a.ts\\": () => import(\\"./modules/a.ts\\"),
+\\"./modules/b.ts\\": () => import(\\"./modules/b.ts\\"),
+\\"../fixture-b/a.ts\\": () => import(\\"../fixture-b/a.ts\\"),
+\\"../fixture-b/b.ts\\": () => import(\\"../fixture-b/b.ts\\")
+};
+"
+`;
+
+exports[`fixture > transform with restoreQueryExtension 1`] = `
+"import * as __vite_glob_1_0 from \\"./modules/a.ts\\"
+import * as __vite_glob_1_1 from \\"./modules/b.ts\\"
+import * as __vite_glob_1_2 from \\"./modules/index.ts\\"
+import { name as __vite_glob_3_0 } from \\"./modules/a.ts\\"
+import { name as __vite_glob_3_1 } from \\"./modules/b.ts\\"
+import { name as __vite_glob_3_2 } from \\"./modules/index.ts\\"
+import { default as __vite_glob_5_0 } from \\"./modules/a.ts?raw\\"
+import { default as __vite_glob_5_1 } from \\"./modules/b.ts?raw\\"
+import \\"../../../../../../types/importMeta\\";
+export const basic = {
+\\"./modules/a.ts\\": () => import(\\"./modules/a.ts\\"),
+\\"./modules/b.ts\\": () => import(\\"./modules/b.ts\\"),
+\\"./modules/index.ts\\": () => import(\\"./modules/index.ts\\")
+};
+export const basicEager = {
+\\"./modules/a.ts\\": __vite_glob_1_0,
+\\"./modules/b.ts\\": __vite_glob_1_1,
+\\"./modules/index.ts\\": __vite_glob_1_2
+};
+export const ignore = {
+\\"./modules/a.ts\\": () => import(\\"./modules/a.ts\\"),
+\\"./modules/b.ts\\": () => import(\\"./modules/b.ts\\")
+};
+export const namedEager = {
+\\"./modules/a.ts\\": __vite_glob_3_0,
+\\"./modules/b.ts\\": __vite_glob_3_1,
+\\"./modules/index.ts\\": __vite_glob_3_2
+};
+export const namedDefault = {
+\\"./modules/a.ts\\": () => import(\\"./modules/a.ts\\").then(m => m[\\"default\\"]),
+\\"./modules/b.ts\\": () => import(\\"./modules/b.ts\\").then(m => m[\\"default\\"]),
+\\"./modules/index.ts\\": () => import(\\"./modules/index.ts\\").then(m => m[\\"default\\"])
+};
+export const eagerAs = {
+\\"./modules/a.ts\\": __vite_glob_5_0,
+\\"./modules/b.ts\\": __vite_glob_5_1
+};
+export const excludeSelf = {
+\\"./sibling.ts\\": () => import(\\"./sibling.ts\\")
+};
+export const customQueryString = {
+\\"./sibling.ts\\": () => import(\\"./sibling.ts?custom&lang.ts\\")
+};
+export const customQueryObject = {
+\\"./sibling.ts\\": () => import(\\"./sibling.ts?foo=bar&raw=true&lang.ts\\")
+};
+export const parent = {
+
+};
+export const rootMixedRelative = {
+\\"/css.spec.ts\\": () => import(\\"../../css.spec.ts?url&lang.ts\\").then(m => m[\\"default\\"]),
+\\"/define.spec.ts\\": () => import(\\"../../define.spec.ts?url&lang.ts\\").then(m => m[\\"default\\"]),
+\\"/import.spec.ts\\": () => import(\\"../../import.spec.ts?url&lang.ts\\").then(m => m[\\"default\\"]),
+\\"/importGlob/fixture-b/a.ts\\": () => import(\\"../fixture-b/a.ts?url&lang.ts\\").then(m => m[\\"default\\"]),
+\\"/importGlob/fixture-b/b.ts\\": () => import(\\"../fixture-b/b.ts?url&lang.ts\\").then(m => m[\\"default\\"]),
+\\"/importGlob/fixture-b/index.ts\\": () => import(\\"../fixture-b/index.ts?url&lang.ts\\").then(m => m[\\"default\\"])
+};
+export const cleverCwd1 = {
+\\"./node_modules/framework/pages/hello.page.js\\": () => import(\\"./node_modules/framework/pages/hello.page.js\\")
+};
+export const cleverCwd2 = {
+\\"./modules/a.ts\\": () => import(\\"./modules/a.ts\\"),
+\\"./modules/b.ts\\": () => import(\\"./modules/b.ts\\"),
+\\"../fixture-b/a.ts\\": () => import(\\"../fixture-b/a.ts\\"),
+\\"../fixture-b/b.ts\\": () => import(\\"../fixture-b/b.ts\\")
+};
+"
+`;
+
+exports[`fixture > virtual modules 1`] = `
+"{
+\\"/modules/a.ts\\": () => import(\\"/modules/a.ts\\"),
+\\"/modules/b.ts\\": () => import(\\"/modules/b.ts\\"),
+\\"/modules/index.ts\\": () => import(\\"/modules/index.ts\\")
+}
+{
+\\"/../fixture-b/a.ts\\": () => import(\\"/../fixture-b/a.ts\\"),
+\\"/../fixture-b/b.ts\\": () => import(\\"/../fixture-b/b.ts\\"),
+\\"/../fixture-b/index.ts\\": () => import(\\"/../fixture-b/index.ts\\")
+}"
+`;
diff --git a/packages/vite/src/node/__tests__/plugins/importGlob/fixture-a/.gitignore b/packages/vite/src/node/__tests__/plugins/importGlob/fixture-a/.gitignore
new file mode 100644
index 00000000000000..2b9b8877da603f
--- /dev/null
+++ b/packages/vite/src/node/__tests__/plugins/importGlob/fixture-a/.gitignore
@@ -0,0 +1 @@
+!/node_modules/
diff --git a/packages/vite/src/node/__tests__/plugins/importGlob/fixture-a/index.ts b/packages/vite/src/node/__tests__/plugins/importGlob/fixture-a/index.ts
new file mode 100644
index 00000000000000..c5b806da06a4b4
--- /dev/null
+++ b/packages/vite/src/node/__tests__/plugins/importGlob/fixture-a/index.ts
@@ -0,0 +1,64 @@
+import '../../../../../../types/importMeta'
+
+/* eslint-disable @typescript-eslint/comma-dangle */
+export interface ModuleType {
+  name: string
+}
+
+export const basic = import.meta.glob<ModuleType>('./modules/*.ts')
+
+export const basicEager = import.meta.glob<ModuleType>('./modules/*.ts', {
+  eager: true
+})
+
+export const ignore = import.meta.glob(['./modules/*.ts', '!**/index.ts'])
+
+export const namedEager = import.meta.glob<string>('./modules/*.ts', {
+  eager: true,
+  import: 'name'
+})
+
+export const namedDefault = import.meta.glob<string>('./modules/*.ts', {
+  import: 'default'
+})
+
+export const eagerAs = import.meta.glob<ModuleType>(
+  ['./modules/*.ts', '!**/index.ts'],
+  { eager: true, as: 'raw' }
+)
+
+export const excludeSelf = import.meta.glob(
+  './*.ts'
+  // for test: annotation contain ")"
+  /*
+   * for test: annotation contain ")"
+   * */
+)
+
+export const customQueryString = import.meta.glob('./*.ts', { query: 'custom' })
+
+export const customQueryObject = import.meta.glob('./*.ts', {
+  query: {
+    foo: 'bar',
+    raw: true
+  }
+})
+
+export const parent = import.meta.glob('../../playground/src/*.ts', {
+  as: 'url'
+})
+
+export const rootMixedRelative = import.meta.glob(
+  ['/*.ts', '../fixture-b/*.ts'],
+  { as: 'url' }
+)
+
+export const cleverCwd1 = import.meta.glob(
+  './node_modules/framework/**/*.page.js'
+)
+
+export const cleverCwd2 = import.meta.glob([
+  './modules/*.ts',
+  '../fixture-b/*.ts',
+  '!**/index.ts'
+])
diff --git a/packages/vite/src/node/__tests__/plugins/importGlob/fixture-a/modules/a.ts b/packages/vite/src/node/__tests__/plugins/importGlob/fixture-a/modules/a.ts
new file mode 100644
index 00000000000000..facd48a0875e65
--- /dev/null
+++ b/packages/vite/src/node/__tests__/plugins/importGlob/fixture-a/modules/a.ts
@@ -0,0 +1 @@
+export const name = 'a'
diff --git a/packages/vite/src/node/__tests__/plugins/importGlob/fixture-a/modules/b.ts b/packages/vite/src/node/__tests__/plugins/importGlob/fixture-a/modules/b.ts
new file mode 100644
index 00000000000000..0b1eb38d9087a2
--- /dev/null
+++ b/packages/vite/src/node/__tests__/plugins/importGlob/fixture-a/modules/b.ts
@@ -0,0 +1 @@
+export const name = 'b'
diff --git a/packages/vite/src/node/__tests__/plugins/importGlob/fixture-a/modules/index.ts b/packages/vite/src/node/__tests__/plugins/importGlob/fixture-a/modules/index.ts
new file mode 100644
index 00000000000000..25b59ae7d30714
--- /dev/null
+++ b/packages/vite/src/node/__tests__/plugins/importGlob/fixture-a/modules/index.ts
@@ -0,0 +1,6 @@
+export { name as a } from './a'
+export { name as b } from './b'
+
+export const name = 'index'
+
+export default 'indexDefault'
diff --git a/packages/vite/src/node/__tests__/plugins/importGlob/fixture-a/node_modules/framework/pages/hello.page.js b/packages/vite/src/node/__tests__/plugins/importGlob/fixture-a/node_modules/framework/pages/hello.page.js
new file mode 100644
index 00000000000000..cbe518a8e79477
--- /dev/null
+++ b/packages/vite/src/node/__tests__/plugins/importGlob/fixture-a/node_modules/framework/pages/hello.page.js
@@ -0,0 +1,4 @@
+// A fake Page file. (This technique of globbing into `node_modules/`
+// is used by vite-plugin-ssr frameworks and Hydrogen.)
+
+export const a = 1
diff --git a/packages/vite/src/node/__tests__/plugins/importGlob/fixture-a/sibling.ts b/packages/vite/src/node/__tests__/plugins/importGlob/fixture-a/sibling.ts
new file mode 100644
index 00000000000000..b286816bf5d63a
--- /dev/null
+++ b/packages/vite/src/node/__tests__/plugins/importGlob/fixture-a/sibling.ts
@@ -0,0 +1 @@
+export const name = 'I am your sibling!'
diff --git a/packages/vite/src/node/__tests__/plugins/importGlob/fixture-b/a.ts b/packages/vite/src/node/__tests__/plugins/importGlob/fixture-b/a.ts
new file mode 100644
index 00000000000000..facd48a0875e65
--- /dev/null
+++ b/packages/vite/src/node/__tests__/plugins/importGlob/fixture-b/a.ts
@@ -0,0 +1 @@
+export const name = 'a'
diff --git a/packages/vite/src/node/__tests__/plugins/importGlob/fixture-b/b.ts b/packages/vite/src/node/__tests__/plugins/importGlob/fixture-b/b.ts
new file mode 100644
index 00000000000000..0b1eb38d9087a2
--- /dev/null
+++ b/packages/vite/src/node/__tests__/plugins/importGlob/fixture-b/b.ts
@@ -0,0 +1 @@
+export const name = 'b'
diff --git a/packages/vite/src/node/__tests__/plugins/importGlob/fixture-b/index.ts b/packages/vite/src/node/__tests__/plugins/importGlob/fixture-b/index.ts
new file mode 100644
index 00000000000000..39bdbfd1a8befb
--- /dev/null
+++ b/packages/vite/src/node/__tests__/plugins/importGlob/fixture-b/index.ts
@@ -0,0 +1,2 @@
+export { name as a } from './a'
+export { name as b } from './b'
diff --git a/packages/vite/src/node/__tests__/plugins/importGlob/fixture.test.ts b/packages/vite/src/node/__tests__/plugins/importGlob/fixture.test.ts
new file mode 100644
index 00000000000000..985263d91db85a
--- /dev/null
+++ b/packages/vite/src/node/__tests__/plugins/importGlob/fixture.test.ts
@@ -0,0 +1,59 @@
+import { resolve } from 'path'
+import { promises as fs } from 'fs'
+import { describe, expect, it } from 'vitest'
+import { transformGlobImport } from '../../../plugins/importMetaGlob'
+import { transformWithEsbuild } from '../../../plugins/esbuild'
+
+describe('fixture', async () => {
+  const resolveId = (id: string) => id
+  const root = resolve(__dirname, '..')
+
+  it('transform', async () => {
+    const id = resolve(__dirname, './fixture-a/index.ts')
+    const code = (
+      await transformWithEsbuild(await fs.readFile(id, 'utf-8'), id)
+    ).code
+
+    expect(
+      (await transformGlobImport(code, id, root, resolveId))?.s.toString()
+    ).toMatchSnapshot()
+  })
+
+  it('virtual modules', async () => {
+    const root = resolve(__dirname, './fixture-a')
+    const code = [
+      "import.meta.glob('/modules/*.ts')",
+      "import.meta.glob(['/../fixture-b/*.ts'])"
+    ].join('\n')
+    expect(
+      (
+        await transformGlobImport(code, 'virtual:module', root, resolveId)
+      )?.s.toString()
+    ).toMatchSnapshot()
+
+    try {
+      await transformGlobImport(
+        "import.meta.glob('./modules/*.ts')",
+        'virtual:module',
+        root,
+        resolveId
+      )
+      expect('no error').toBe('should throw an error')
+    } catch (err) {
+      expect(err).toMatchInlineSnapshot(
+        "[Error: In virtual modules, all globs must start with '/']"
+      )
+    }
+  })
+
+  it('transform with restoreQueryExtension', async () => {
+    const id = resolve(__dirname, './fixture-a/index.ts')
+    const code = (
+      await transformWithEsbuild(await fs.readFile(id, 'utf-8'), id)
+    ).code
+
+    expect(
+      (await transformGlobImport(code, id, root, resolveId, true))?.s.toString()
+    ).toMatchSnapshot()
+  })
+})
diff --git a/packages/vite/src/node/__tests__/plugins/importGlob/parse.test.ts b/packages/vite/src/node/__tests__/plugins/importGlob/parse.test.ts
new file mode 100644
index 00000000000000..df1e0d758e8849
--- /dev/null
+++ b/packages/vite/src/node/__tests__/plugins/importGlob/parse.test.ts
@@ -0,0 +1,202 @@
+import { describe, expect, it } from 'vitest'
+import { parseImportGlob } from '../../../plugins/importMetaGlob'
+
+async function run(input: string) {
+  const items = await parseImportGlob(
+    input,
+    process.cwd(),
+    process.cwd(),
+    (id) => id
+  )
+  return items.map((i) => ({ globs: i.globs, options: i.options }))
+}
+
+async function runError(input: string) {
+  try {
+    await run(input)
+  } catch (e) {
+    return e
+  }
+}
+
+describe('parse positives', async () => {
+  it('basic', async () => {
+    expect(
+      await run(`
+    import.meta.importGlob(\'./modules/*.ts\')
+    `)
+    ).toMatchInlineSnapshot('[]')
+  })
+
+  it('array', async () => {
+    expect(
+      await run(`
+    import.meta.importGlob([\'./modules/*.ts\', './dir/*.{js,ts}\'])
+    `)
+    ).toMatchInlineSnapshot('[]')
+  })
+
+  it('options with multilines', async () => {
+    expect(
+      await run(`
+    import.meta.importGlob([
+      \'./modules/*.ts\',
+      "!./dir/*.{js,ts}"
+    ], {
+      eager: true,
+      import: 'named'
+    })
+    `)
+    ).toMatchInlineSnapshot('[]')
+  })
+
+  it('options with multilines', async () => {
+    expect(
+      await run(`
+    const modules = import.meta.glob(
+      '/dir/**'
+      // for test: annotation contain ")"
+      /*
+       * for test: annotation contain ")"
+       * */
+    )
+    `)
+    ).toMatchInlineSnapshot(`
+      [
+        {
+          "globs": [
+            "/dir/**",
+          ],
+          "options": {},
+        },
+      ]
+    `)
+  })
+
+  it('options query', async () => {
+    expect(
+      await run(`
+    const modules = import.meta.glob(
+      '/dir/**',
+      {
+        query: {
+          foo: 'bar',
+          raw: true,
+        }
+      }
+    )
+    `)
+    ).toMatchInlineSnapshot(`
+      [
+        {
+          "globs": [
+            "/dir/**",
+          ],
+          "options": {
+            "query": {
+              "foo": "bar",
+              "raw": true,
+            },
+          },
+        },
+      ]
+    `)
+  })
+})
+
+describe('parse negatives', async () => {
+  it('syntax error', async () => {
+    expect(await runError('import.meta.importGlob(')).toMatchInlineSnapshot(
+      'undefined'
+    )
+  })
+
+  it('empty', async () => {
+    expect(await runError('import.meta.importGlob()')).toMatchInlineSnapshot(
+      'undefined'
+    )
+  })
+
+  it('3 args', async () => {
+    expect(
+      await runError('import.meta.importGlob("", {}, {})')
+    ).toMatchInlineSnapshot('undefined')
+  })
+
+  it('in string', async () => {
+    expect(await runError('"import.meta.importGlob()"')).toBeUndefined()
+  })
+
+  it('variable', async () => {
+    expect(await runError('import.meta.importGlob(hey)')).toMatchInlineSnapshot(
+      'undefined'
+    )
+  })
+
+  it('template', async () => {
+    // eslint-disable-next-line no-template-curly-in-string
+    expect(
+      await runError('import.meta.importGlob(`hi ${hey}`)')
+    ).toMatchInlineSnapshot('undefined')
+  })
+
+  it('be string', async () => {
+    expect(await runError('import.meta.importGlob(1)')).toMatchInlineSnapshot(
+      'undefined'
+    )
+  })
+
+  it('be array variable', async () => {
+    expect(
+      await runError('import.meta.importGlob([hey])')
+    ).toMatchInlineSnapshot('undefined')
+    expect(
+      await runError('import.meta.importGlob(["1", hey])')
+    ).toMatchInlineSnapshot('undefined')
+  })
+
+  it('options', async () => {
+    expect(
+      await runError('import.meta.importGlob("hey", hey)')
+    ).toMatchInlineSnapshot('undefined')
+    expect(
+      await runError('import.meta.importGlob("hey", [])')
+    ).toMatchInlineSnapshot('undefined')
+  })
+
+  it('options props', async () => {
+    expect(
+      await runError('import.meta.importGlob("hey", { hey: 1 })')
+    ).toMatchInlineSnapshot('undefined')
+    expect(
+      await runError('import.meta.importGlob("hey", { import: hey })')
+    ).toMatchInlineSnapshot('undefined')
+    expect(
+      await runError('import.meta.importGlob("hey", { eager: 123 })')
+    ).toMatchInlineSnapshot('undefined')
+  })
+
+  it('options query', async () => {
+    expect(
+      await runError(
+        'import.meta.importGlob("./*.js", { as: "raw", query: "hi" })'
+      )
+    ).toMatchInlineSnapshot('undefined')
+    expect(
+      await runError('import.meta.importGlob("./*.js", { query: 123 })')
+    ).toMatchInlineSnapshot('undefined')
+    expect(
+      await runError('import.meta.importGlob("./*.js", { query: { foo: {} } })')
+    ).toMatchInlineSnapshot('undefined')
+    expect(
+      await runError(
+        'import.meta.importGlob("./*.js", { query: { foo: hey } })'
+      )
+    ).toMatchInlineSnapshot('undefined')
+    expect(
+      await runError(
+        'import.meta.importGlob("./*.js", { query: { foo: 123, ...a } })'
+      )
+    ).toMatchInlineSnapshot('undefined')
+  })
+})
diff --git a/packages/vite/src/node/__tests__/plugins/importGlob/utils.test.ts b/packages/vite/src/node/__tests__/plugins/importGlob/utils.test.ts
new file mode 100644
index 00000000000000..302df97ec92ede
--- /dev/null
+++ b/packages/vite/src/node/__tests__/plugins/importGlob/utils.test.ts
@@ -0,0 +1,31 @@
+import { describe, expect, it } from 'vitest'
+import { getCommonBase } from '../../../plugins/importMetaGlob'
+
+describe('getCommonBase()', async () => {
+  it('basic', () => {
+    expect(getCommonBase(['/a/b/*.js', '/a/c/*.js'])).toBe('/a')
+  })
+  it('common base', () => {
+    expect(getCommonBase(['/a/b/**/*.vue', '/a/b/**/*.jsx'])).toBe('/a/b')
+  })
+  it('static file', () => {
+    expect(
+      getCommonBase(['/a/b/**/*.vue', '/a/b/**/*.jsx', '/a/b/foo.js'])
+    ).toBe('/a/b')
+    expect(getCommonBase(['/a/b/**/*.vue', '/a/b/**/*.jsx', '/a/foo.js'])).toBe(
+      '/a'
+    )
+  })
+  it('correct `scan()`', () => {
+    expect(getCommonBase(['/a/*.vue'])).toBe('/a')
+    expect(getCommonBase(['/a/some.vue'])).toBe('/a')
+    expect(getCommonBase(['/a/b/**/c/foo.vue', '/a/b/c/**/*.jsx'])).toBe('/a/b')
+  })
+  it('single', () => {
+    expect(getCommonBase(['/a/b/c/*.vue'])).toBe('/a/b/c')
+    expect(getCommonBase(['/a/b/c/foo.vue'])).toBe('/a/b/c')
+  })
+  it('no common base', () => {
+    expect(getCommonBase(['/a/b/*.js', '/c/a/b/*.js'])).toBe('/')
+  })
+})
diff --git a/packages/vite/src/node/config.ts b/packages/vite/src/node/config.ts
index 29dc3fe2045a5a..e7fcaefeb2a799 100644
--- a/packages/vite/src/node/config.ts
+++ b/packages/vite/src/node/config.ts
@@ -152,6 +152,14 @@ export interface UserConfig {
    * @alpha
    */
   ssr?: SSROptions
+  /**
+   * Experimental features
+   *
+   * Features under this field are addressed to be changed that might NOT follow semver.
+   * Please be careful and always pin Vite's version when using them.
+   * @experimental
+   */
+  experimental?: ExperimentalOptions
   /**
    * Log level.
    * Default: 'info'
@@ -199,6 +207,16 @@ export interface UserConfig {
   }
 }
 
+export interface ExperimentalOptions {
+  /**
+   * Append fake `&lang.(ext)` when queries are specified, to preseve the file extension for following plugins to process.
+   *
+   * @experimental
+   * @default false
+   */
+  importGlobRestoreExtension?: boolean
+}
+
 export type SSRTarget = 'node' | 'webworker'
 
 export interface SSROptions {
diff --git a/packages/vite/src/node/importGlob.ts b/packages/vite/src/node/importGlob.ts
deleted file mode 100644
index afdf2dbc06bb87..00000000000000
--- a/packages/vite/src/node/importGlob.ts
+++ /dev/null
@@ -1,399 +0,0 @@
-import path from 'path'
-import { promises as fsp } from 'fs'
-import glob from 'fast-glob'
-import JSON5 from 'json5'
-import {
-  isModernFlag,
-  preloadMethod,
-  preloadMarker
-} from './plugins/importAnalysisBuild'
-import { isCSSRequest } from './plugins/css'
-import {
-  cleanUrl,
-  singlelineCommentsRE,
-  multilineCommentsRE,
-  blankReplacer,
-  normalizePath,
-  parseRequest
-} from './utils'
-import type { RollupError } from 'rollup'
-import type { Logger } from '.'
-import { dynamicImportToGlob } from '@rollup/plugin-dynamic-import-vars'
-import { parse as parseJS } from 'acorn'
-
-interface GlobParams {
-  base: string
-  pattern: string
-  parentDepth: number
-  isAbsolute: boolean
-}
-
-interface GlobOptions {
-  as?: string
-}
-
-interface DynamicImportRequest {
-  raw?: boolean
-}
-
-interface DynamicImportPattern {
-  query: DynamicImportRequest
-  userPattern: string
-  rawPattern: string
-}
-
-export function parseDynamicImportPattern(
-  strings: string
-): DynamicImportPattern | null {
-  const filename = strings.slice(1, -1)
-  const rawQuery = parseRequest(filename)
-  const query: DynamicImportRequest = {}
-  const ast = (
-    parseJS(strings, {
-      ecmaVersion: 'latest',
-      sourceType: 'module'
-    }) as any
-  ).body[0].expression
-
-  const userPatternQuery = dynamicImportToGlob(ast, filename)
-  if (!userPatternQuery) {
-    return null
-  }
-
-  const [userPattern] = userPatternQuery.split('?', 2)
-  const [rawPattern] = filename.split('?', 2)
-
-  if (rawQuery?.raw !== undefined) {
-    query.raw = true
-  }
-
-  return {
-    query,
-    userPattern,
-    rawPattern
-  }
-}
-
-function formatGlobRelativePattern(base: string, pattern: string): GlobParams {
-  let parentDepth = 0
-  while (pattern.startsWith('../')) {
-    pattern = pattern.slice(3)
-    base = path.resolve(base, '../')
-    parentDepth++
-  }
-  if (pattern.startsWith('./')) {
-    pattern = pattern.slice(2)
-  }
-
-  return { base, pattern, parentDepth, isAbsolute: false }
-}
-
-export async function transformGlob(
-  source: string,
-  pos: number,
-  importer: string,
-  importIndex: number,
-  importEndIndex: number,
-  query: DynamicImportRequest,
-  userPattern: string,
-  root: string,
-  normalizeUrl?: (url: string, pos: number) => Promise<[string, string]>,
-  resolve?: (url: string, importer?: string) => Promise<string | undefined>,
-  preload = true
-): Promise<{
-  importsString: string
-  imports: string[]
-  exp: string
-  endIndex: number
-  isEager: boolean
-  pattern: string
-  base: string
-}> {
-  importer = cleanUrl(importer)
-  const importerBasename = path.basename(importer)
-
-  let globParams: GlobParams | null = null
-  if (userPattern.startsWith('/')) {
-    globParams = {
-      isAbsolute: true,
-      base: path.resolve(root),
-      pattern: userPattern.slice(1),
-      parentDepth: 0
-    }
-  } else if (userPattern.startsWith('.')) {
-    globParams = formatGlobRelativePattern(path.dirname(importer), userPattern)
-  } else if (resolve) {
-    const resolvedId = await resolve(userPattern, importer)
-    if (resolvedId) {
-      const importerDirname = path.dirname(importer)
-      globParams = formatGlobRelativePattern(
-        importerDirname,
-        normalizePath(path.relative(importerDirname, resolvedId))
-      )
-    }
-  }
-
-  if (!globParams) {
-    throw `pattern must start with "." or "/" (relative to project root) or alias path`
-  }
-  const { base, parentDepth, isAbsolute, pattern } = globParams
-
-  const files = glob.sync(pattern, {
-    cwd: base,
-    // Ignore node_modules by default unless explicitly indicated in the pattern
-    ignore: /(^|\/)node_modules\//.test(pattern) ? [] : ['**/node_modules/**']
-  })
-
-  const isEager = source.slice(pos, pos + 21) === 'import.meta.globEager'
-  const imports: string[] = []
-  let importsString = ``
-  let entries = ``
-  for (let i = 0; i < files.length; i++) {
-    // skip importer itself
-    if (files[i] === importerBasename) continue
-    const file = isAbsolute
-      ? `/${files[i]}`
-      : parentDepth
-      ? `${'../'.repeat(parentDepth)}${files[i]}`
-      : `./${files[i]}`
-    let importee = file
-    if (normalizeUrl) {
-      ;[importee] = await normalizeUrl(file, pos)
-    }
-    imports.push(importee)
-    if (query.raw) {
-      entries += ` ${JSON.stringify(file)}: ${JSON.stringify(
-        await fsp.readFile(path.join(base, files[i]), 'utf-8')
-      )},`
-    } else {
-      const isEagerDefault =
-        isEager && source.slice(pos + 21, pos + 28) === 'Default'
-      const importeeUrl = isCSSRequest(importee) ? `${importee}?used` : importee
-      if (isEager) {
-        const identifier = `__glob_${importIndex}_${i}`
-        // css imports injecting a ?used query to export the css string
-        importsString += `import ${
-          isEagerDefault ? `` : `* as `
-        }${identifier} from ${JSON.stringify(importeeUrl)};`
-        entries += ` ${JSON.stringify(file)}: ${identifier},`
-      } else {
-        let imp = `import(${JSON.stringify(importeeUrl)})`
-        if (!normalizeUrl && preload) {
-          imp =
-            `(${isModernFlag}` +
-            `? ${preloadMethod}(()=>${imp},"${preloadMarker}")` +
-            `: ${imp})`
-        }
-        entries += ` ${JSON.stringify(file)}: () => ${imp},`
-      }
-    }
-  }
-
-  return {
-    imports,
-    importsString,
-    exp: `{${entries}}`,
-    endIndex: importEndIndex,
-    isEager,
-    pattern,
-    base
-  }
-}
-
-export async function transformImportGlob(
-  source: string,
-  pos: number,
-  importer: string,
-  importIndex: number,
-  root: string,
-  logger: Logger,
-  normalizeUrl?: (url: string, pos: number) => Promise<[string, string]>,
-  resolve?: (url: string, importer?: string) => Promise<string | undefined>,
-  preload = true
-): Promise<{
-  importsString: string
-  imports: string[]
-  exp: string
-  endIndex: number
-  isEager: boolean
-  pattern: string
-  base: string
-}> {
-  const err = (msg: string) => {
-    const e = new Error(`Invalid glob import syntax: ${msg}`)
-    ;(e as any).pos = pos
-    return e
-  }
-  const [userPattern, options, endIndex] = lexGlobPattern(source, pos)
-  const query: DynamicImportRequest = {}
-
-  const isRawType = options?.as === 'raw'
-  if (isRawType) {
-    query.raw = true
-  }
-  try {
-    return transformGlob(
-      source,
-      pos,
-      importer,
-      importIndex,
-      endIndex,
-      query,
-      userPattern,
-      root,
-      normalizeUrl,
-      resolve,
-      preload
-    )
-  } catch (error) {
-    throw err(error)
-  }
-}
-
-export async function transformDynamicImportGlob(
-  source: string,
-  expStart: number,
-  expEnd: number,
-  importer: string,
-  start: number,
-  end: number,
-  root: string,
-  normalizeUrl?: (url: string, pos: number) => Promise<[string, string]>,
-  resolve?: (url: string, importer?: string) => Promise<string | undefined>,
-  preload = false
-): Promise<{
-  importsString: string
-  imports: string[]
-  exp: string
-  endIndex: number
-  isEager: boolean
-  pattern: string
-  rawPattern: string
-  base: string
-} | null> {
-  const err = (msg: string) => {
-    const e = new Error(`Invalid dynamic import syntax: ${msg}`)
-    ;(e as any).pos = start
-    return e
-  }
-  let fileName = source.slice(start, end)
-
-  if (fileName[1] !== '.' && fileName[1] !== '/' && resolve) {
-    const resolvedFileName = await resolve(fileName.slice(1, -1), importer)
-    if (!resolvedFileName) {
-      return null
-    }
-    const relativeFileName = path.posix.relative(
-      path.dirname(importer),
-      resolvedFileName
-    )
-    fileName = `\`${relativeFileName}\``
-  }
-
-  const dynamicImportPattern = parseDynamicImportPattern(fileName)
-  if (!dynamicImportPattern) {
-    return null
-  }
-  const { query, rawPattern, userPattern } = dynamicImportPattern
-
-  try {
-    return {
-      rawPattern,
-      ...(await transformGlob(
-        source,
-        start,
-        importer,
-        expStart,
-        expEnd,
-        query,
-        userPattern,
-        root,
-        normalizeUrl,
-        resolve,
-        preload
-      ))
-    }
-  } catch (error) {
-    throw err(error)
-  }
-}
-
-const enum LexerState {
-  inCall,
-  inSingleQuoteString,
-  inDoubleQuoteString,
-  inTemplateString
-}
-
-function lexGlobPattern(
-  code: string,
-  pos: number
-): [string, GlobOptions, number] {
-  let state = LexerState.inCall
-  let pattern = ''
-
-  let i = code.indexOf(`(`, pos) + 1
-  outer: for (; i < code.length; i++) {
-    const char = code.charAt(i)
-    switch (state) {
-      case LexerState.inCall:
-        if (char === `'`) {
-          state = LexerState.inSingleQuoteString
-        } else if (char === `"`) {
-          state = LexerState.inDoubleQuoteString
-        } else if (char === '`') {
-          state = LexerState.inTemplateString
-        } else if (/\s/.test(char)) {
-          continue
-        } else {
-          error(i)
-        }
-        break
-      case LexerState.inSingleQuoteString:
-        if (char === `'`) {
-          break outer
-        } else {
-          pattern += char
-        }
-        break
-      case LexerState.inDoubleQuoteString:
-        if (char === `"`) {
-          break outer
-        } else {
-          pattern += char
-        }
-        break
-      case LexerState.inTemplateString:
-        if (char === '`') {
-          break outer
-        } else {
-          pattern += char
-        }
-        break
-      default:
-        throw new Error('unknown import.meta.glob lexer state')
-    }
-  }
-  const noCommentCode = code
-    .slice(i + 1)
-    .replace(singlelineCommentsRE, blankReplacer)
-    .replace(multilineCommentsRE, blankReplacer)
-
-  const endIndex = noCommentCode.indexOf(')')
-  const optionString = noCommentCode.substring(0, endIndex)
-  const commaIndex = optionString.indexOf(',')
-
-  let options = {}
-  if (commaIndex > -1) {
-    options = JSON5.parse(optionString.substring(commaIndex + 1))
-  }
-  return [pattern, options, endIndex + i + 2]
-}
-
-function error(pos: number) {
-  const err = new Error(
-    `import.meta.glob() can only accept string literals.`
-  ) as RollupError
-  err.pos = pos
-  throw err
-}
diff --git a/packages/vite/src/node/index.ts b/packages/vite/src/node/index.ts
index c15359f45b69de..0d401363b8a3b6 100644
--- a/packages/vite/src/node/index.ts
+++ b/packages/vite/src/node/index.ts
@@ -33,6 +33,7 @@ export type {
 export type {
   PreviewOptions,
   PreviewServer,
+  PreviewServerHook,
   ResolvedPreviewOptions
 } from './preview'
 export type {
@@ -73,6 +74,9 @@ export type { TransformOptions as EsbuildTransformOptions } from 'esbuild'
 export type { ESBuildOptions, ESBuildTransformResult } from './plugins/esbuild'
 export type { Manifest, ManifestChunk } from './plugins/manifest'
 export type { ResolveOptions, InternalResolveOptions } from './plugins/resolve'
+export type { SplitVendorChunkCache } from './plugins/splitVendorChunk'
+import type { ChunkMetadata } from './plugins/metadata'
+
 export type {
   WebSocketServer,
   WebSocketClient,
@@ -87,6 +91,7 @@ export type {
   TransformResult
 } from './server/transformRequest'
 export type { HmrOptions, HmrContext } from './server/hmr'
+
 export type {
   HMRPayload,
   ConnectedPayload,
@@ -110,9 +115,12 @@ export type { RollupCommonJSOptions } from 'types/commonjs'
 export type { RollupDynamicImportVarsOptions } from 'types/dynamicImportVars'
 export type { CustomEventMap, InferCustomEventPayload } from 'types/customEvent'
 export type { Matcher, AnymatchPattern, AnymatchFn } from 'types/anymatch'
-export type { SplitVendorChunkCache } from './plugins/splitVendorChunk'
-
-import type { ChunkMetadata } from './plugins/metadata'
+export type {
+  ImportGlobFunction,
+  ImportGlobEagerFunction,
+  ImportGlobOptions,
+  KnownAsTypeMap
+} from 'types/importGlob'
 
 declare module 'rollup' {
   export interface RenderedChunk {
diff --git a/packages/vite/src/node/optimizer/scan.ts b/packages/vite/src/node/optimizer/scan.ts
index ef59a35b1d22d3..111aefc40dea15 100644
--- a/packages/vite/src/node/optimizer/scan.ts
+++ b/packages/vite/src/node/optimizer/scan.ts
@@ -1,9 +1,9 @@
 import fs from 'fs'
 import path from 'path'
 import glob from 'fast-glob'
-import type { ResolvedConfig, Logger } from '..'
+import type { ResolvedConfig } from '..'
 import type { Loader, Plugin, OnLoadResult } from 'esbuild'
-import { build, transform } from 'esbuild'
+import { build } from 'esbuild'
 import {
   KNOWN_ASSET_TYPES,
   JS_TYPES_RE,
@@ -25,11 +25,9 @@ import {
 } from '../utils'
 import type { PluginContainer } from '../server/pluginContainer'
 import { createPluginContainer } from '../server/pluginContainer'
-import { init, parse } from 'es-module-lexer'
-import MagicString from 'magic-string'
-import { transformImportGlob } from '../importGlob'
 import { performance } from 'perf_hooks'
 import colors from 'picocolors'
+import { transformGlobImport } from '../plugins/importMetaGlob'
 
 const debug = createDebugger('vite:deps')
 
@@ -300,19 +298,18 @@ function esbuildScanPlugin(
                 (loader.startsWith('ts') ? extractImportPaths(content) : '')
 
               const key = `${path}?id=${scriptId++}`
-
               if (contents.includes('import.meta.glob')) {
                 scripts[key] = {
-                  // transformGlob already transforms to js
                   loader: 'js',
-                  contents: await transformGlob(
-                    contents,
-                    path,
-                    config.root,
-                    loader,
-                    resolve,
-                    config.logger
-                  )
+                  contents:
+                    (
+                      await transformGlobImport(
+                        contents,
+                        path,
+                        config.root,
+                        resolve
+                      )
+                    )?.s.toString() || contents
                 }
               } else {
                 scripts[key] = {
@@ -467,20 +464,6 @@ function esbuildScanPlugin(
           config.optimizeDeps?.esbuildOptions?.loader?.[`.${ext}`] ||
           (ext as Loader)
 
-        if (contents.includes('import.meta.glob')) {
-          return transformGlob(
-            contents,
-            id,
-            config.root,
-            loader,
-            resolve,
-            config.logger
-          ).then((contents) => ({
-            loader,
-            contents
-          }))
-        }
-
         return {
           loader,
           contents
@@ -490,43 +473,6 @@ function esbuildScanPlugin(
   }
 }
 
-async function transformGlob(
-  source: string,
-  importer: string,
-  root: string,
-  loader: Loader,
-  resolve: (url: string, importer?: string) => Promise<string | undefined>,
-  logger: Logger
-) {
-  // transform the content first since es-module-lexer can't handle non-js
-  if (loader !== 'js') {
-    source = (await transform(source, { loader })).code
-  }
-
-  await init
-  const imports = parse(source)[0]
-  const s = new MagicString(source)
-  for (let index = 0; index < imports.length; index++) {
-    const { s: start, e: end, ss: expStart } = imports[index]
-    const url = source.slice(start, end)
-    if (url !== 'import.meta') continue
-    if (source.slice(end, end + 5) !== '.glob') continue
-    const { importsString, exp, endIndex } = await transformImportGlob(
-      source,
-      start,
-      normalizePath(importer),
-      index,
-      root,
-      logger,
-      undefined,
-      resolve
-    )
-    s.prepend(importsString)
-    s.overwrite(expStart, endIndex, exp, { contentOnly: true })
-  }
-  return s.toString()
-}
-
 /**
  * when using TS + (Vue + `<script setup>`) or Svelte, imports may seem
  * unused to esbuild and dropped in the build output, which prevents
diff --git a/packages/vite/src/node/plugin.ts b/packages/vite/src/node/plugin.ts
index 354b246dd9f182..3bfe789a299987 100644
--- a/packages/vite/src/node/plugin.ts
+++ b/packages/vite/src/node/plugin.ts
@@ -13,6 +13,7 @@ import type { IndexHtmlTransform } from './plugins/html'
 import type { ModuleNode } from './server/moduleGraph'
 import type { ConfigEnv, ResolvedConfig } from './'
 import type { HmrContext } from './server/hmr'
+import type { PreviewServerHook } from './preview'
 
 /**
  * Vite plugins extends the Rollup plugin interface with a few extra
@@ -79,6 +80,15 @@ export interface Plugin extends RollupPlugin {
    * are applied. Hook can be async functions and will be called in series.
    */
   configureServer?: ServerHook
+  /**
+   * Configure the preview server. The hook receives the connect server and
+   * its underlying http server.
+   *
+   * The hooks are called before other middlewares are applied. A hook can
+   * return a post hook that will be called after other middlewares are
+   * applied. Hooks can be async functions and will be called in series.
+   */
+  configurePreviewServer?: PreviewServerHook
   /**
    * Transform index.html.
    * The hook receives the following arguments:
diff --git a/packages/vite/src/node/plugins/assetImportMetaUrl.ts b/packages/vite/src/node/plugins/assetImportMetaUrl.ts
index 217b0d3fee1564..73932bfb29a411 100644
--- a/packages/vite/src/node/plugins/assetImportMetaUrl.ts
+++ b/packages/vite/src/node/plugins/assetImportMetaUrl.ts
@@ -12,7 +12,7 @@ import { stripLiteral } from 'strip-literal'
  * ```
  * new URL(`./dir/${name}.png`, import.meta.url)
  * // transformed to
- * import.meta.globEager('./dir/**.png')[`./dir/${name}.png`].default
+ * import.meta.glob('./dir/**.png', { eager: true, import: 'default' })[`./dir/${name}.png`]
  * ```
  */
 export function assetImportMetaUrlPlugin(config: ResolvedConfig): Plugin {
@@ -44,7 +44,7 @@ export function assetImportMetaUrlPlugin(config: ResolvedConfig): Plugin {
             const ast = this.parse(rawUrl)
             const templateLiteral = (ast as any).body[0].expression
             if (templateLiteral.expressions.length) {
-              const pattern = buildGlobPattern(templateLiteral)
+              const pattern = JSON.stringify(buildGlobPattern(templateLiteral))
               // Note: native import.meta.url is not supported in the baseline
               // target so we use the global location here. It can be
               // window.location or self.location in case it is used in a Web Worker.
@@ -52,9 +52,7 @@ export function assetImportMetaUrlPlugin(config: ResolvedConfig): Plugin {
               s.overwrite(
                 index,
                 index + exp.length,
-                `new URL(import.meta.globEagerDefault(${JSON.stringify(
-                  pattern
-                )})[${rawUrl}], self.location)`,
+                `new URL((import.meta.glob(${pattern}, { eager: true, import: 'default' }))[${rawUrl}], self.location)`,
                 { contentOnly: true }
               )
               continue
diff --git a/packages/vite/src/node/plugins/css.ts b/packages/vite/src/node/plugins/css.ts
index 22dfc33f67a509..3ffd93bb9f9910 100644
--- a/packages/vite/src/node/plugins/css.ts
+++ b/packages/vite/src/node/plugins/css.ts
@@ -818,19 +818,6 @@ async function compileCSS(
       for (let i = 0; i < files.length; i++) {
         deps.add(files[i])
       }
-      if (server) {
-        // register glob importers so we can trigger updates on file add/remove
-        if (!(id in server._globImporters)) {
-          server._globImporters[id] = {
-            module: server.moduleGraph.getModuleById(id)!,
-            importGlobs: []
-          }
-        }
-        server._globImporters[id].importGlobs.push({
-          base: config.root,
-          pattern
-        })
-      }
     } else if (message.type === 'warning') {
       let msg = `[vite:css] ${message.text}`
       if (message.line && message.column) {
diff --git a/packages/vite/src/node/plugins/dynamicImportVars.ts b/packages/vite/src/node/plugins/dynamicImportVars.ts
index 31951691dddcff..6d981329995179 100644
--- a/packages/vite/src/node/plugins/dynamicImportVars.ts
+++ b/packages/vite/src/node/plugins/dynamicImportVars.ts
@@ -1,10 +1,23 @@
 import MagicString from 'magic-string'
+import path from 'path'
 import { init, parse as parseImports } from 'es-module-lexer'
 import type { ImportSpecifier } from 'es-module-lexer'
 import type { Plugin } from '../plugin'
 import type { ResolvedConfig } from '../config'
-import { transformDynamicImportGlob } from '../importGlob'
 import { createFilter } from '@rollup/pluginutils'
+import { dynamicImportToGlob } from '@rollup/plugin-dynamic-import-vars'
+import { parseRequest } from '../utils'
+import { parse as parseJS } from 'acorn'
+
+interface DynamicImportRequest {
+  raw?: boolean
+}
+
+interface DynamicImportPattern {
+  query: DynamicImportRequest
+  userPattern: string
+  rawPattern: string
+}
 
 const dynamicImportHelper = (glob: Record<string, any>, path: string) => {
   const v = glob[path]
@@ -19,6 +32,76 @@ const dynamicImportHelper = (glob: Record<string, any>, path: string) => {
 }
 export const dynamicImportHelperId = '/@vite/dynamic-import-helper'
 
+export function parseDynamicImportPattern(
+  strings: string
+): DynamicImportPattern | null {
+  const filename = strings.slice(1, -1)
+  const rawQuery = parseRequest(filename)
+  const query: DynamicImportRequest = {}
+  const ast = (
+    parseJS(strings, {
+      ecmaVersion: 'latest',
+      sourceType: 'module'
+    }) as any
+  ).body[0].expression
+
+  const userPatternQuery = dynamicImportToGlob(ast, filename)
+  if (!userPatternQuery) {
+    return null
+  }
+
+  const [userPattern] = userPatternQuery.split('?', 2)
+  const [rawPattern] = filename.split('?', 2)
+
+  if (rawQuery?.raw !== undefined) {
+    query.raw = true
+  }
+
+  return {
+    query,
+    userPattern,
+    rawPattern
+  }
+}
+
+export async function transformDynamicImportGlob(
+  source: string,
+  importer: string,
+  start: number,
+  end: number,
+  resolve?: (url: string, importer?: string) => Promise<string | undefined>
+): Promise<{
+  exp: string
+  pattern: string
+  rawPattern: string
+} | null> {
+  let fileName = source.slice(start, end)
+
+  if (fileName[1] !== '.' && fileName[1] !== '/' && resolve) {
+    const resolvedFileName = await resolve(fileName.slice(1, -1), importer)
+    if (!resolvedFileName) {
+      return null
+    }
+    const relativeFileName = path.posix.relative(
+      path.dirname(importer),
+      resolvedFileName
+    )
+    fileName = `\`${relativeFileName}\``
+  }
+
+  const dynamicImportPattern = parseDynamicImportPattern(fileName)
+  if (!dynamicImportPattern) {
+    return null
+  }
+  const { query, rawPattern, userPattern } = dynamicImportPattern
+
+  return {
+    pattern: userPattern,
+    rawPattern,
+    exp: `import.meta.glob(${JSON.stringify(rawPattern)})`
+  }
+}
+
 export function dynamicImportHelperPlugin(): Plugin {
   return {
     name: 'vite:dynamic-import-helper',
@@ -88,13 +171,9 @@ export function dynamicImportVarsPlugin(config: ResolvedConfig): Plugin {
         try {
           result = await transformDynamicImportGlob(
             source,
-            expStart,
-            expEnd,
             importer,
             start,
             end,
-            config.root,
-            undefined,
             resolve
           )
         } catch (error) {
diff --git a/packages/vite/src/node/plugins/importAnalysis.ts b/packages/vite/src/node/plugins/importAnalysis.ts
index a416b6adddc1b9..83d052830c1e79 100644
--- a/packages/vite/src/node/plugins/importAnalysis.ts
+++ b/packages/vite/src/node/plugins/importAnalysis.ts
@@ -42,7 +42,6 @@ import type { ViteDevServer } from '..'
 import { checkPublicFile } from './asset'
 import { parse as parseJS } from 'acorn'
 import type { Node } from 'estree'
-import { transformDynamicImportGlob, transformImportGlob } from '../importGlob'
 import { makeLegalIdentifier } from '@rollup/pluginutils'
 import { shouldExternalizeForSSR } from '../ssr/ssrExternal'
 import { performance } from 'perf_hooks'
@@ -52,7 +51,10 @@ import {
   getDepsCacheDir,
   optimizedDepNeedsInterop
 } from '../optimizer'
-import { dynamicImportHelperId } from './dynamicImportVars'
+import {
+  dynamicImportHelperId,
+  transformDynamicImportGlob
+} from './dynamicImportVars'
 
 const isDebug = !!process.env.DEBUG
 const debug = createDebugger('vite:import-analysis')
@@ -109,12 +111,12 @@ function markExplicitImport(url: string) {
 export function importAnalysisPlugin(config: ResolvedConfig): Plugin {
   const { root, base } = config
   const clientPublicPath = path.posix.join(base, CLIENT_PUBLIC_PATH)
+  let server: ViteDevServer
   const resolve = config.createResolver({
     preferRelative: true,
     tryIndex: false,
     extensions: []
   })
-  let server: ViteDevServer
 
   return {
     name: 'vite:import-analysis',
@@ -354,44 +356,6 @@ export function importAnalysisPlugin(config: ResolvedConfig): Plugin {
             }
           } else if (prop === '.env') {
             hasEnv = true
-          } else if (prop === '.glo' && source[end + 4] === 'b') {
-            // transform import.meta.glob()
-            // e.g. `import.meta.glob('glob:./dir/*.js')`
-            const {
-              imports,
-              importsString,
-              exp,
-              endIndex,
-              base,
-              pattern,
-              isEager
-            } = await transformImportGlob(
-              source,
-              start,
-              importer,
-              index,
-              root,
-              config.logger,
-              normalizeUrl,
-              resolve
-            )
-            str().prepend(importsString)
-            str().overwrite(expStart, endIndex, exp, { contentOnly: true })
-            imports.forEach((url) => {
-              url = url.replace(base, '/')
-              importedUrls.add(url)
-              if (isEager) staticImportedUrls.add(url)
-            })
-            if (!(importerModule.file! in server._globImporters)) {
-              server._globImporters[importerModule.file!] = {
-                module: importerModule,
-                importGlobs: []
-              }
-            }
-            server._globImporters[importerModule.file!].importGlobs.push({
-              base,
-              pattern
-            })
           }
           continue
         }
@@ -541,13 +505,9 @@ export function importAnalysisPlugin(config: ResolvedConfig): Plugin {
             try {
               glob = await transformDynamicImportGlob(
                 source,
-                expStart,
-                expEnd,
                 importer,
                 start,
                 end,
-                config.root,
-                undefined,
                 resolve
               )
             } catch (e) {
@@ -555,17 +515,13 @@ export function importAnalysisPlugin(config: ResolvedConfig): Plugin {
             }
 
             if (glob) {
-              const { exp, imports, rawPattern } = glob
+              const { exp, rawPattern } = glob
               needDynamicImportHelper = true
               str().overwrite(
                 expStart,
                 expEnd,
                 `__variableDynamicImportRuntimeHelper(${exp}, \`${rawPattern}\`)`
               )
-              imports.forEach((url) => {
-                url = url.replace(base, '/')
-                importedUrls.add(url)
-              })
               if (!(importerModule.file! in server._globImporters)) {
                 server._globImporters[importerModule.file!] = {
                   module: importerModule,
diff --git a/packages/vite/src/node/plugins/importAnalysisBuild.ts b/packages/vite/src/node/plugins/importAnalysisBuild.ts
index 7e684db2b4cc6b..a4b091dc76da3a 100644
--- a/packages/vite/src/node/plugins/importAnalysisBuild.ts
+++ b/packages/vite/src/node/plugins/importAnalysisBuild.ts
@@ -6,7 +6,6 @@ import type { ImportSpecifier } from 'es-module-lexer'
 import { init, parse as parseImports } from 'es-module-lexer'
 import type { OutputChunk, SourceMap } from 'rollup'
 import { isCSSRequest, removedPureCssFilesCache } from './css'
-import { transformImportGlob } from '../importGlob'
 import { bareImportRE, combineSourcemaps } from '../utils'
 import type { RawSourceMap } from '@ampproject/remapping'
 import { genSourceMapUrl } from '../server/sourcemap'
@@ -96,11 +95,6 @@ export function buildImportAnalysisPlugin(config: ResolvedConfig): Plugin {
     ? `'modulepreload'`
     : `(${detectScriptRel.toString()})()`
   const preloadCode = `const scriptRel = ${scriptRel};const seen = {};const base = '${preloadBaseMarker}';export const ${preloadMethod} = ${preload.toString()}`
-  const resolve = config.createResolver({
-    preferRelative: true,
-    tryIndex: false,
-    extensions: []
-  })
 
   return {
     name: 'vite:build-import-analysis',
@@ -120,7 +114,6 @@ export function buildImportAnalysisPlugin(config: ResolvedConfig): Plugin {
     async transform(source, importer) {
       if (
         importer.includes('node_modules') &&
-        !source.includes('import.meta.glob') &&
         !dynamicImportPrefixRE.test(source)
       ) {
         return
@@ -152,43 +145,6 @@ export function buildImportAnalysisPlugin(config: ResolvedConfig): Plugin {
           d: dynamicIndex
         } = imports[index]
 
-        // import.meta.glob
-        if (
-          source.slice(start, end) === 'import.meta' &&
-          source.slice(end, end + 5) === '.glob'
-        ) {
-          // es worker allow globEager / glob
-          // iife worker just allow globEager
-          if (
-            isWorker &&
-            config.worker.format === 'iife' &&
-            source.slice(end, end + 10) !== '.globEager'
-          ) {
-            this.error(
-              '`import.meta.glob` is not supported in workers with `iife` format, use `import.meta.globEager` instead.',
-              end
-            )
-          }
-          const { importsString, exp, endIndex, isEager } =
-            await transformImportGlob(
-              source,
-              start,
-              importer,
-              index,
-              config.root,
-              config.logger,
-              undefined,
-              resolve,
-              insertPreload
-            )
-          str().prepend(importsString)
-          str().overwrite(expStart, endIndex, exp, { contentOnly: true })
-          if (!isEager) {
-            needPreloadHelper = true
-          }
-          continue
-        }
-
         if (dynamicIndex > -1 && insertPreload) {
           needPreloadHelper = true
           const original = source.slice(expStart, expEnd)
@@ -204,6 +160,8 @@ export function buildImportAnalysisPlugin(config: ResolvedConfig): Plugin {
           specifier &&
           isCSSRequest(specifier) &&
           source.slice(expStart, start).includes('from') &&
+          // already has ?used query (by import.meta.glob)
+          !specifier.match(/\?used(&|$)/) &&
           // edge case for package names ending with .css (e.g normalize.css)
           !(bareImportRE.test(specifier) && !specifier.includes('/'))
         ) {
diff --git a/packages/vite/src/node/plugins/importMetaGlob.ts b/packages/vite/src/node/plugins/importMetaGlob.ts
new file mode 100644
index 00000000000000..20bc10f8296ed4
--- /dev/null
+++ b/packages/vite/src/node/plugins/importMetaGlob.ts
@@ -0,0 +1,462 @@
+import { isAbsolute, posix } from 'path'
+import { isMatch, scan } from 'micromatch'
+import { stripLiteral } from 'strip-literal'
+import type { ArrayExpression, CallExpression, Literal, Node } from 'estree'
+import { parseExpressionAt } from 'acorn'
+import MagicString from 'magic-string'
+import fg from 'fast-glob'
+import { stringifyQuery } from 'ufo'
+import type { Plugin } from '../plugin'
+import type { ViteDevServer } from '../server'
+import type { ModuleNode } from '../server/moduleGraph'
+import type { ResolvedConfig } from '../config'
+import { isCSSRequest } from './css'
+import type { GeneralImportGlobOptions } from '../../../types/importGlob'
+import { normalizePath, slash } from '../utils'
+
+export interface ParsedImportGlob {
+  match: RegExpMatchArray
+  index: number
+  globs: string[]
+  globsResolved: string[]
+  isRelative: boolean
+  options: GeneralImportGlobOptions
+  type: string
+  start: number
+  end: number
+}
+
+export function getAffectedGlobModules(file: string, server: ViteDevServer) {
+  const modules: ModuleNode[] = []
+  for (const [id, allGlobs] of server._importGlobMap!) {
+    if (allGlobs.some((glob) => isMatch(file, glob)))
+      modules.push(...(server.moduleGraph.getModulesByFile(id) || []))
+  }
+  modules.forEach((i) => {
+    if (i?.file) server.moduleGraph.onFileChange(i.file)
+  })
+  return modules
+}
+
+export function importGlobPlugin(config: ResolvedConfig): Plugin {
+  let server: ViteDevServer | undefined
+
+  return {
+    name: 'vite:import-glob',
+    configureServer(_server) {
+      server = _server
+      server._importGlobMap.clear()
+    },
+    async transform(code, id) {
+      if (!code.includes('import.meta.glob')) return
+      const result = await transformGlobImport(
+        code,
+        id,
+        config.root,
+        (im) => this.resolve(im, id).then((i) => i?.id || im),
+        config.experimental?.importGlobRestoreExtension
+      )
+      if (result) {
+        if (server) {
+          const allGlobs = result.matches.map((i) => i.globsResolved)
+          server._importGlobMap.set(id, allGlobs)
+          result.files.forEach((file) => {
+            // update watcher
+            server!.watcher.add(dirname(file))
+          })
+        }
+        return {
+          code: result.s.toString(),
+          map: result.s.generateMap()
+        }
+      }
+    }
+  }
+}
+
+const importGlobRE =
+  /\bimport\.meta\.(glob|globEager|globEagerDefault)(?:<\w+>)?\s*\(/g
+
+const knownOptions = {
+  as: 'string',
+  eager: 'boolean',
+  import: 'string',
+  exhaustive: 'boolean'
+} as const
+
+const forceDefaultAs = ['raw', 'url']
+
+export async function parseImportGlob(
+  code: string,
+  importer: string | undefined,
+  root: string,
+  resolveId: IdResolver
+): Promise<ParsedImportGlob[]> {
+  let cleanCode
+  try {
+    cleanCode = stripLiteral(code)
+  } catch (e) {
+    // skip invalid js code
+    return []
+  }
+  const matches = Array.from(cleanCode.matchAll(importGlobRE))
+
+  const tasks = matches.map(async (match, index) => {
+    const type = match[1]
+    const start = match.index!
+
+    const err = (msg: string) => {
+      const e = new Error(`Invalid glob import syntax: ${msg}`)
+      ;(e as any).pos = start
+      return e
+    }
+
+    let ast: CallExpression
+
+    try {
+      ast = parseExpressionAt(code, start, {
+        ecmaVersion: 'latest',
+        sourceType: 'module',
+        ranges: true
+      }) as any
+    } catch (e) {
+      const _e = e as any
+      if (_e.message && _e.message.startsWith('Unterminated string constant'))
+        return undefined!
+      throw _e
+    }
+
+    if (ast.type !== 'CallExpression')
+      throw err(`Expect CallExpression, got ${ast.type}`)
+
+    if (ast.arguments.length < 1 || ast.arguments.length > 2)
+      throw err(`Expected 1-2 arguments, but got ${ast.arguments.length}`)
+
+    const arg1 = ast.arguments[0] as ArrayExpression | Literal
+    const arg2 = ast.arguments[1] as Node | undefined
+
+    const globs: string[] = []
+    if (arg1.type === 'ArrayExpression') {
+      for (const element of arg1.elements) {
+        if (!element) continue
+        if (element.type !== 'Literal') throw err('Could only use literals')
+        if (typeof element.value !== 'string')
+          throw err(
+            `Expected glob to be a string, but got "${typeof element.value}"`
+          )
+
+        globs.push(element.value)
+      }
+    } else if (arg1.type === 'Literal') {
+      if (typeof arg1.value !== 'string')
+        throw err(
+          `Expected glob to be a string, but got "${typeof arg1.value}"`
+        )
+      globs.push(arg1.value)
+    } else {
+      throw err('Could only use literals')
+    }
+
+    // arg2
+    const options: GeneralImportGlobOptions = {}
+    if (arg2) {
+      if (arg2.type !== 'ObjectExpression')
+        throw err(
+          `Expected the second argument o to be a object literal, but got "${arg2.type}"`
+        )
+
+      for (const property of arg2.properties) {
+        if (
+          property.type === 'SpreadElement' ||
+          property.key.type !== 'Identifier'
+        )
+          throw err('Could only use literals')
+
+        const name = property.key.name as keyof GeneralImportGlobOptions
+
+        if (name === 'query') {
+          if (property.value.type === 'ObjectExpression') {
+            const data: Record<string, string> = {}
+            for (const prop of property.value.properties) {
+              if (
+                prop.type === 'SpreadElement' ||
+                prop.key.type !== 'Identifier' ||
+                prop.value.type !== 'Literal'
+              )
+                throw err('Could only use literals')
+              data[prop.key.name] = prop.value.value as any
+            }
+            options.query = data
+          } else if (property.value.type === 'Literal') {
+            if (typeof property.value.value !== 'string')
+              throw err(
+                `Expected query to be a string, but got "${typeof property.value
+                  .value}"`
+              )
+            options.query = property.value.value
+          } else {
+            throw err('Could only use literals')
+          }
+          continue
+        }
+
+        if (!(name in knownOptions)) throw err(`Unknown options ${name}`)
+
+        if (property.value.type !== 'Literal')
+          throw err('Could only use literals')
+
+        const valueType = typeof property.value.value
+        if (valueType === 'undefined') continue
+
+        if (valueType !== knownOptions[name])
+          throw err(
+            `Expected the type of option "${name}" to be "${knownOptions[name]}", but got "${valueType}"`
+          )
+        options[name] = property.value.value as any
+      }
+    }
+
+    if (options.as && forceDefaultAs.includes(options.as)) {
+      if (options.import && options.import !== 'default')
+        throw err(
+          `Option "export" can only be "default" when "as" is "${options.as}", but got "${options.import}"`
+        )
+      options.import = 'default'
+    }
+
+    if (options.as && options.query)
+      throw err('Options "as" and "query" cannot be used together')
+
+    if (options.as) options.query = options.as
+
+    const end = ast.range![1]
+
+    const globsResolved = await Promise.all(
+      globs.map((glob) => toAbsoluteGlob(glob, root, importer, resolveId))
+    )
+    const isRelative = globs.every((i) => '.!'.includes(i[0]))
+
+    return {
+      match,
+      index,
+      globs,
+      globsResolved,
+      isRelative,
+      options,
+      type,
+      start,
+      end
+    }
+  })
+
+  return (await Promise.all(tasks)).filter(Boolean)
+}
+
+const importPrefix = '__vite_glob_'
+
+const { basename, dirname, relative, join } = posix
+
+export async function transformGlobImport(
+  code: string,
+  id: string,
+  root: string,
+  resolveId: IdResolver,
+  restoreQueryExtension = false
+) {
+  id = slash(id)
+  root = slash(root)
+  const isVirtual = isVirtualModule(id)
+  const dir = isVirtual ? undefined : dirname(id)
+  const matches = await parseImportGlob(
+    code,
+    isVirtual ? undefined : id,
+    root,
+    resolveId
+  )
+  const matchedFiles = new Set<string>()
+
+  // TODO: backwards compatibility
+  matches.forEach((i) => {
+    if (i.type === 'globEager') i.options.eager = true
+    if (i.type === 'globEagerDefault') {
+      i.options.eager = true
+      i.options.import = 'default'
+    }
+  })
+
+  if (!matches.length) return
+
+  const s = new MagicString(code)
+
+  const staticImports = (
+    await Promise.all(
+      matches.map(
+        async ({ globsResolved, isRelative, options, index, start, end }) => {
+          const cwd = getCommonBase(globsResolved) ?? root
+          const files = (
+            await fg(globsResolved, {
+              cwd,
+              absolute: true,
+              dot: !!options.exhaustive,
+              ignore: options.exhaustive
+                ? []
+                : [join(cwd, '**/node_modules/**')]
+            })
+          )
+            .filter((file) => file !== id)
+            .sort()
+
+          const objectProps: string[] = []
+          const staticImports: string[] = []
+
+          let query = !options.query
+            ? ''
+            : typeof options.query === 'string'
+            ? options.query
+            : stringifyQuery(options.query as any)
+
+          if (query && !query.startsWith('?')) query = `?${query}`
+
+          const resolvePaths = (file: string) => {
+            if (!dir) {
+              if (isRelative)
+                throw new Error(
+                  "In virtual modules, all globs must start with '/'"
+                )
+              const filePath = `/${relative(root, file)}`
+              return { filePath, importPath: filePath }
+            }
+
+            let importPath = relative(dir, file)
+            if (!importPath.startsWith('.')) importPath = `./${importPath}`
+
+            let filePath: string
+            if (isRelative) {
+              filePath = importPath
+            } else {
+              filePath = relative(root, file)
+              if (!filePath.startsWith('.')) filePath = `/${filePath}`
+            }
+
+            return { filePath, importPath }
+          }
+
+          files.forEach((file, i) => {
+            const paths = resolvePaths(file)
+            const filePath = paths.filePath
+            let importPath = paths.importPath
+            let importQuery = query
+
+            if (isCSSRequest(file))
+              importQuery = importQuery ? `${importQuery}&used` : '?used'
+
+            if (importQuery && importQuery !== '?raw') {
+              const fileExtension = basename(file).split('.').slice(-1)[0]
+              if (fileExtension && restoreQueryExtension)
+                importQuery = `${importQuery}&lang.${fileExtension}`
+            }
+
+            importPath = `${importPath}${importQuery}`
+
+            if (options.eager) {
+              const variableName = `${importPrefix}${index}_${i}`
+              const expression = options.import
+                ? `{ ${options.import} as ${variableName} }`
+                : `* as ${variableName}`
+              staticImports.push(
+                `import ${expression} from ${JSON.stringify(importPath)}`
+              )
+              objectProps.push(`${JSON.stringify(filePath)}: ${variableName}`)
+            } else {
+              let importStatement = `import(${JSON.stringify(importPath)})`
+              if (options.import)
+                importStatement += `.then(m => m[${JSON.stringify(
+                  options.import
+                )}])`
+              objectProps.push(
+                `${JSON.stringify(filePath)}: () => ${importStatement}`
+              )
+            }
+          })
+
+          files.forEach((i) => matchedFiles.add(i))
+
+          const replacement = `{\n${objectProps.join(',\n')}\n}`
+          s.overwrite(start, end, replacement)
+
+          return staticImports
+        }
+      )
+    )
+  ).flat()
+
+  if (staticImports.length) s.prepend(`${staticImports.join('\n')}\n`)
+
+  return {
+    s,
+    matches,
+    files: matchedFiles
+  }
+}
+
+type IdResolver = (
+  id: string,
+  importer?: string
+) => Promise<string | undefined> | string | undefined
+
+export async function toAbsoluteGlob(
+  glob: string,
+  root: string,
+  importer: string | undefined,
+  resolveId: IdResolver
+): Promise<string> {
+  let pre = ''
+  if (glob.startsWith('!')) {
+    pre = '!'
+    glob = glob.slice(1)
+  }
+
+  const dir = importer ? dirname(importer) : root
+  if (glob.startsWith('/')) return pre + posix.join(root, glob.slice(1))
+  if (glob.startsWith('./')) return pre + posix.join(dir, glob.slice(2))
+  if (glob.startsWith('../')) return pre + posix.join(dir, glob)
+  if (glob.startsWith('**')) return pre + glob
+
+  const resolved = normalizePath((await resolveId(glob, importer)) || glob)
+  if (isAbsolute(resolved)) return pre + resolved
+
+  throw new Error(
+    `Invalid glob: "${glob}" (resolved: "${resolved}"). It must starts with '/' or './'`
+  )
+}
+
+export function getCommonBase(globsResolved: string[]): null | string {
+  const bases = globsResolved
+    .filter((g) => !g.startsWith('!'))
+    .map((glob) => {
+      let { base } = scan(glob)
+      // `scan('a/foo.js')` returns `base: 'a/foo.js'`
+      if (posix.basename(base).includes('.')) base = posix.dirname(base)
+
+      return base
+    })
+
+  if (!bases.length) return null
+
+  let commonAncestor = ''
+  const dirS = bases[0].split('/')
+  for (let i = 0; i < dirS.length; i++) {
+    const candidate = dirS.slice(0, i + 1).join('/')
+    if (bases.every((base) => base.startsWith(candidate)))
+      commonAncestor = candidate
+    else break
+  }
+  if (!commonAncestor) commonAncestor = '/'
+
+  return commonAncestor
+}
+
+export function isVirtualModule(id: string) {
+  // https://vitejs.dev/guide/api-plugin.html#virtual-modules-convention
+  return id.startsWith('virtual:') || id.startsWith('\0') || !id.includes('/')
+}
diff --git a/packages/vite/src/node/plugins/index.ts b/packages/vite/src/node/plugins/index.ts
index 7d2ce7531e8d62..1fd5f57f1796ad 100644
--- a/packages/vite/src/node/plugins/index.ts
+++ b/packages/vite/src/node/plugins/index.ts
@@ -20,6 +20,7 @@ import { workerImportMetaUrlPlugin } from './workerImportMetaUrl'
 import { ensureWatchPlugin } from './ensureWatch'
 import { metadataPlugin } from './metadata'
 import { dynamicImportHelperPlugin } from './dynamicImportVars'
+import { importGlobPlugin } from './importMetaGlob'
 
 export async function resolvePlugins(
   config: ResolvedConfig,
@@ -74,6 +75,7 @@ export async function resolvePlugins(
     isBuild && buildHtmlPlugin(config),
     workerImportMetaUrlPlugin(config),
     ...buildPlugins.pre,
+    importGlobPlugin(config),
     ...postPlugins,
     ...buildPlugins.post,
     // internal server-only plugins are always applied after everything else
diff --git a/packages/vite/src/node/plugins/worker.ts b/packages/vite/src/node/plugins/worker.ts
index 5826980f5b0f72..f0850242de9a90 100644
--- a/packages/vite/src/node/plugins/worker.ts
+++ b/packages/vite/src/node/plugins/worker.ts
@@ -260,7 +260,7 @@ export function webWorkerPlugin(config: ResolvedConfig): Plugin {
               }
             }`,
 
-            // Empty sourcemap to supress Rollup warning
+            // Empty sourcemap to suppress Rollup warning
             map: { mappings: '' }
           }
         } else {
@@ -281,7 +281,7 @@ export function webWorkerPlugin(config: ResolvedConfig): Plugin {
           url
         )}, ${JSON.stringify(workerOptions, null, 2)})
         }`,
-        map: { mappings: '' } // Empty sourcemap to supress Rolup warning
+        map: { mappings: '' } // Empty sourcemap to suppress Rollup warning
       }
     },
 
diff --git a/packages/vite/src/node/preview.ts b/packages/vite/src/node/preview.ts
index c1670c5d7efa72..e48f2e6231933f 100644
--- a/packages/vite/src/node/preview.ts
+++ b/packages/vite/src/node/preview.ts
@@ -14,6 +14,7 @@ import corsMiddleware from 'cors'
 import { proxyMiddleware } from './server/middlewares/proxy'
 import { resolveHostname } from './utils'
 import { printCommonServerUrls } from './logger'
+import type * as http from 'http'
 
 export interface PreviewOptions extends CommonServerOptions {}
 
@@ -53,6 +54,11 @@ export interface PreviewServer {
   printUrls: () => void
 }
 
+export type PreviewServerHook = (server: {
+  middlewares: Connect.Server
+  httpServer: http.Server
+}) => (() => void) | void | Promise<(() => void) | void>
+
 /**
  * Starts the Vite server in preview mode, to simulate a production deployment
  * @experimental
@@ -69,6 +75,16 @@ export async function preview(
     await resolveHttpsConfig(config.preview?.https, config.cacheDir)
   )
 
+  // apply server hooks from plugins
+  const postHooks: ((() => void) | void)[] = []
+  for (const plugin of config.plugins) {
+    if (plugin.configurePreviewServer) {
+      postHooks.push(
+        await plugin.configurePreviewServer({ middlewares: app, httpServer })
+      )
+    }
+  }
+
   // cors
   const { cors } = config.preview
   if (cors !== false) {
@@ -83,6 +99,7 @@ export async function preview(
 
   app.use(compression())
 
+  // static assets
   const distDir = path.resolve(config.root, config.build.outDir)
   app.use(
     config.base,
@@ -93,6 +110,9 @@ export async function preview(
     })
   )
 
+  // apply post server hooks from plugins
+  postHooks.forEach((fn) => fn && fn())
+
   const options = config.preview
   const hostname = resolveHostname(options.host)
   const port = options.port ?? 4173
diff --git a/packages/vite/src/node/server/hmr.ts b/packages/vite/src/node/server/hmr.ts
index 8eca99268e93d7..da2ba9f99bd753 100644
--- a/packages/vite/src/node/server/hmr.ts
+++ b/packages/vite/src/node/server/hmr.ts
@@ -2,14 +2,14 @@ import fs from 'fs'
 import path from 'path'
 import colors from 'picocolors'
 import type { ViteDevServer } from '..'
-import { createDebugger, normalizePath } from '../utils'
+import { createDebugger, normalizePath, unique } from '../utils'
 import type { ModuleNode } from './moduleGraph'
 import type { Update } from 'types/hmrPayload'
 import { CLIENT_DIR } from '../constants'
 import type { RollupError } from 'rollup'
-import { isMatch } from 'micromatch'
 import type { Server } from 'http'
 import { isCSSRequest } from '../plugins/css'
+import { getAffectedGlobModules } from '../plugins/importMetaGlob'
 
 export const debugHmr = createDebugger('vite:hmr')
 
@@ -34,7 +34,7 @@ export interface HmrContext {
   server: ViteDevServer
 }
 
-function getShortName(file: string, root: string) {
+export function getShortName(file: string, root: string) {
   return file.startsWith(root + '/') ? path.posix.relative(root, file) : file
 }
 
@@ -125,7 +125,7 @@ export async function handleHMRUpdate(
   updateModules(shortFile, hmrContext.modules, timestamp, server)
 }
 
-function updateModules(
+export function updateModules(
   file: string,
   modules: ModuleNode[],
   timestamp: number,
@@ -185,33 +185,16 @@ function updateModules(
 
 export async function handleFileAddUnlink(
   file: string,
-  server: ViteDevServer,
-  isUnlink = false
+  server: ViteDevServer
 ): Promise<void> {
-  const modules = [...(server.moduleGraph.getModulesByFile(file) ?? [])]
-  if (isUnlink && file in server._globImporters) {
-    delete server._globImporters[file]
-  } else {
-    for (const i in server._globImporters) {
-      const { module, importGlobs } = server._globImporters[i]
-      for (const { base, pattern } of importGlobs) {
-        if (
-          isMatch(file, pattern) ||
-          isMatch(path.relative(base, file), pattern)
-        ) {
-          modules.push(module)
-          // We use `onFileChange` to invalidate `module.file` so that subsequent `ssrLoadModule()`
-          // calls get fresh glob import results with(out) the newly added(/removed) `file`.
-          server.moduleGraph.onFileChange(module.file!)
-          break
-        }
-      }
-    }
-  }
+  const modules = [...(server.moduleGraph.getModulesByFile(file) || [])]
+
+  modules.push(...getAffectedGlobModules(file, server))
+
   if (modules.length > 0) {
     updateModules(
       getShortName(file, server.config.root),
-      modules,
+      unique(modules),
       Date.now(),
       server
     )
diff --git a/packages/vite/src/node/server/index.ts b/packages/vite/src/node/server/index.ts
index b8f1c3330a9b48..0b499b42c2d457 100644
--- a/packages/vite/src/node/server/index.ts
+++ b/packages/vite/src/node/server/index.ts
@@ -30,7 +30,6 @@ import {
   serveStaticMiddleware
 } from './middlewares/static'
 import { timeMiddleware } from './middlewares/time'
-import type { ModuleNode } from './moduleGraph'
 import { ModuleGraph } from './moduleGraph'
 import type { Connect } from 'types/connect'
 import { isParentDirectory, normalizePath } from '../utils'
@@ -242,23 +241,14 @@ export interface ViteDevServer {
    */
   _optimizedDeps: OptimizedDeps | null
   /**
-   * Deps that are externalized
    * @internal
    */
-  _ssrExternals: string[] | null
+  _importGlobMap: Map<string, string[][]>
   /**
+   * Deps that are externalized
    * @internal
    */
-  _globImporters: Record<
-    string,
-    {
-      module: ModuleNode
-      importGlobs: {
-        base: string
-        pattern: string
-      }[]
-    }
-  >
+  _ssrExternals: string[] | null
   /**
    * @internal
    */
@@ -403,8 +393,8 @@ export async function createServer(
 
     _optimizedDeps: null,
     _ssrExternals: null,
-    _globImporters: Object.create(null),
     _restartPromise: null,
+    _importGlobMap: new Map(),
     _forceOptimizeOnRestart: false,
     _pendingRequests: new Map()
   }
@@ -456,9 +446,8 @@ export async function createServer(
   watcher.on('add', (file) => {
     handleFileAddUnlink(normalizePath(file), server)
   })
-
   watcher.on('unlink', (file) => {
-    handleFileAddUnlink(normalizePath(file), server, true)
+    handleFileAddUnlink(normalizePath(file), server)
   })
 
   if (!middlewareMode && httpServer) {
diff --git a/packages/vite/types/chokidar.d.ts b/packages/vite/types/chokidar.d.ts
index d56d507ccff183..e83e8e8d4b0166 100644
--- a/packages/vite/types/chokidar.d.ts
+++ b/packages/vite/types/chokidar.d.ts
@@ -140,8 +140,10 @@ export interface WatchOptions {
   cwd?: string
 
   /**
-   *  If set to true then the strings passed to .watch() and .add() are treated as literal path
-   *  names, even if they look like globs. Default: false.
+   * If set to true then the strings passed to .watch() and .add() are treated as literal path
+   * names, even if they look like globs.
+   *
+   * @default false
    */
   disableGlobbing?: boolean
 
diff --git a/packages/vite/types/importGlob.d.ts b/packages/vite/types/importGlob.d.ts
new file mode 100644
index 00000000000000..19674209569898
--- /dev/null
+++ b/packages/vite/types/importGlob.d.ts
@@ -0,0 +1,89 @@
+import type { Worker } from 'okie'
+
+export interface ImportGlobOptions<
+  Eager extends boolean,
+  AsType extends string
+> {
+  /**
+   * Import type for the import url.
+   */
+  as?: AsType
+  /**
+   * Import as static or dynamic
+   *
+   * @default false
+   */
+  eager?: Eager
+  /**
+   * Import only the specific named export. Set to `default` to import the default export.
+   */
+  import?: string
+  /**
+   * Custom queries
+   */
+  query?: string | Record<string, string | number | boolean>
+  /**
+   * Search files also inside `node_modules/` and hidden directories (e.g. `.git/`). This might have impact on performance.
+   *
+   * @default false
+   */
+  exhaustive?: boolean
+}
+
+export type GeneralImportGlobOptions = ImportGlobOptions<boolean, string>
+
+export interface KnownAsTypeMap {
+  raw: string
+  url: string
+  worker: Worker<any, any>
+}
+
+export interface ImportGlobFunction {
+  /**
+   * 1. No generic provided, infer the type from `eager` and `as`
+   */
+  <
+    Eager extends boolean,
+    As extends string,
+    T = As extends keyof KnownAsTypeMap ? KnownAsTypeMap[As] : unknown
+  >(
+    glob: string | string[],
+    options?: ImportGlobOptions<Eager, As>
+  ): (Eager extends true ? true : false) extends true
+    ? Record<string, T>
+    : Record<string, () => Promise<T>>
+  /**
+   * 2. Module generic provided, infer the type from `eager: false`
+   */
+  <M>(
+    glob: string | string[],
+    options?: ImportGlobOptions<false, string>
+  ): Record<string, () => Promise<M>>
+  /**
+   * 3. Module generic provided, infer the type from `eager: true`
+   */
+  <M>(
+    glob: string | string[],
+    options: ImportGlobOptions<true, string>
+  ): Record<string, M>
+}
+
+export interface ImportGlobEagerFunction {
+  /**
+   * 1. No generic provided, infer the type from `as`
+   */
+  <
+    As extends string,
+    T = As extends keyof KnownAsTypeMap ? KnownAsTypeMap[As] : unknown
+  >(
+    glob: string | string[],
+    options?: Omit<ImportGlobOptions<boolean, As>, 'eager'>
+  ): Record<string, T>
+  /**
+   * 2. Module generic provided
+   */
+  <M>(
+    glob: string | string[],
+    options?: Omit<ImportGlobOptions<boolean, string>, 'eager'>
+  ): Record<string, M>
+}
diff --git a/packages/vite/types/importMeta.d.ts b/packages/vite/types/importMeta.d.ts
index 06dcb52b9ad954..54eaa9f4c4c140 100644
--- a/packages/vite/types/importMeta.d.ts
+++ b/packages/vite/types/importMeta.d.ts
@@ -18,15 +18,11 @@ interface ImportMeta {
 
   readonly env: ImportMetaEnv
 
-  glob<Module = { [key: string]: any }>(
-    pattern: string,
-    options?: GlobOptions
-  ): Record<string, () => Promise<Module>>
-
-  globEager<Module = { [key: string]: any }>(
-    pattern: string,
-    options?: GlobOptions
-  ): Record<string, Module>
+  glob: import('./importGlob').ImportGlobFunction
+  /**
+   * @deprecated Use `import.meta.glob('*', { eager: true })` instead
+   */
+  globEager: import('./importGlob').ImportGlobEagerFunction
 }
 
 interface ImportMetaEnv {
diff --git a/packages/vite/types/shims.d.ts b/packages/vite/types/shims.d.ts
index d62252050acefc..587b3344e6ce39 100644
--- a/packages/vite/types/shims.d.ts
+++ b/packages/vite/types/shims.d.ts
@@ -90,14 +90,6 @@ declare module 'rollup-plugin-web-worker-loader' {
   export default p
 }
 
-declare module 'micromatch' {
-  export function isMatch(
-    path: string,
-    pattern: string,
-    options?: { matchBase?: boolean }
-  ): boolean
-}
-
 // LESS' types somewhat references this which doesn't make sense in Node,
 // so we have to shim it
 declare interface HTMLLinkElement {}
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index a20eb4e3bb7d1f..df88cfb84c628d 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -893,11 +893,12 @@ importers:
       source-map-js: ^1.0.2
       source-map-support: ^0.5.21
       strip-ansi: ^6.0.1
-      strip-literal: ^0.2.0
+      strip-literal: ^0.3.0
       terser: ^5.13.1
       tsconfck: ^1.2.2
       tslib: ^2.4.0
       types: link:./types
+      ufo: ^0.8.4
       ws: ^8.6.0
     dependencies:
       esbuild: 0.14.27
@@ -967,11 +968,12 @@ importers:
       source-map-js: 1.0.2
       source-map-support: 0.5.21
       strip-ansi: 6.0.1
-      strip-literal: 0.2.0
+      strip-literal: 0.3.0
       terser: 5.13.1
       tsconfck: 1.2.2_typescript@4.5.4
       tslib: 2.4.0
       types: link:types
+      ufo: 0.8.4
       ws: 8.6.0
 
 packages:
@@ -9018,8 +9020,8 @@ packages:
     engines: {node: '>=8'}
     dev: true
 
-  /strip-literal/0.2.0:
-    resolution: {integrity: sha512-pqhiiFRDifA2CRVH0Gmv6MDbd2b27MS0oIqqy7JCqfL5m2sh68223lmEK2eoBXp4vNaq8G1Wzwd9dfQcWszUlg==}
+  /strip-literal/0.3.0:
+    resolution: {integrity: sha512-J+lfm3Pw5nzURj2B8acyvUSBqs3JbjM8WAfrmeH3qcn32+ew6kFwbZFV9+X8k9UOIAkQw9WPSzFZy3083c7l5Q==}
     dependencies:
       acorn: 8.7.1
     dev: true
@@ -9586,6 +9588,10 @@ packages:
     resolution: {integrity: sha512-kMBmblijHJXyOpKzgDhKx9INYU4u4E1RPMB0HqmKSgWG8vEcf3exEfLh4FFfzd3xdQOw9EuIy/cP0akY6rHopQ==}
     dev: true
 
+  /ufo/0.8.4:
+    resolution: {integrity: sha512-/+BmBDe8GvlB2nIflWasLLAInjYG0bC9HRnfEpNi4sw77J2AJNnEVnTDReVrehoh825+Q/evF3THXTAweyam2g==}
+    dev: true
+
   /uglify-js/3.15.0:
     resolution: {integrity: sha512-x+xdeDWq7FiORDvyIJ0q/waWd4PhjBNOm5dQUOq2AKC0IEjxOS66Ha9tctiVDGcRQuh69K7fgU5oRuTK4cysSg==}
     engines: {node: '>=0.8.0'}
diff --git a/scripts/jestEnv.cjs b/scripts/jestEnv.cjs
index 255b83063efc5a..b576155644a27f 100644
--- a/scripts/jestEnv.cjs
+++ b/scripts/jestEnv.cjs
@@ -29,13 +29,13 @@ module.exports = class PlaywrightEnvironment extends NodeEnvironment {
     }))
     this.global.page = await browser.newPage()
 
-    // suppress @vue/ref-transform warning
     const console = this.global.console
     const warn = console.warn
     console.warn = (msg, ...args) => {
-      if (!msg.includes('@vue/ref-transform')) {
-        warn.call(console, msg, ...args)
-      }
+      // suppress @vue/ref-transform warning
+      if (msg.includes('@vue/ref-transform')) return
+      if (msg.includes('Generated an empty chunk')) return
+      warn.call(console, msg, ...args)
     }
   }