diff --git a/examples/vue-cli/vue.config.js b/examples/vue-cli/vue.config.js
index a0ef2a582c..79431e1ef0 100644
--- a/examples/vue-cli/vue.config.js
+++ b/examples/vue-cli/vue.config.js
@@ -1,9 +1,14 @@
 const UnoCSS = require('@unocss/webpack').default
+const { transformerVariantGroup } = require('unocss')
 
 module.exports = {
   configureWebpack: {
     plugins: [
-      UnoCSS(),
+      UnoCSS({
+        transformers: [
+          transformerVariantGroup(),
+        ],
+      }),
     ],
   },
   chainWebpack(config) {
diff --git a/package.json b/package.json
index 25f6cfddf6..eb6de5f2c4 100644
--- a/package.json
+++ b/package.json
@@ -5,7 +5,7 @@
   "packageManager": "pnpm@7.3.0",
   "scripts": {
     "bench": "npm -C bench run bench",
-    "build": "rimraf packages/*/dist && esno scripts/copy-files.ts && pnpm -r --filter !playground --filter !interactive run build && pnpm -r run build-post",
+    "build": "rimraf packages/*/dist && esno scripts/copy-files.ts && pnpm -r --filter=./packages/* run build && pnpm -r run build-post",
     "dev": "nr stub",
     "deploy": "nr stub && npm -C playground run build && npm -C interactive run build",
     "interactive": "npm -C interactive run dev",
@@ -14,7 +14,7 @@
     "play": "npm -C playground run dev",
     "release": "bumpp package.json packages/**/package.json",
     "size": "esno scripts/size.ts",
-    "stub": "pnpm -r --parallel run stub",
+    "stub": "pnpm -r --filter=./packages/* --parallel run stub",
     "typecheck": "tsc --noEmit",
     "test": "vitest",
     "test:update": "vitest -u"
diff --git a/packages/core/src/types.ts b/packages/core/src/types.ts
index 6b6f76d00b..db282577c0 100644
--- a/packages/core/src/types.ts
+++ b/packages/core/src/types.ts
@@ -594,8 +594,6 @@ export interface PluginOptions {
 
   /**
    * Custom transformers to the source code
-   *
-   * Currently only supported in Vite
    */
   transformers?: SourceCodeTransformer[]
 }
diff --git a/packages/webpack/package.json b/packages/webpack/package.json
index c06f273a00..be23a864f8 100644
--- a/packages/webpack/package.json
+++ b/packages/webpack/package.json
@@ -40,9 +40,11 @@
     "webpack": "^4 || ^5"
   },
   "dependencies": {
+    "@ampproject/remapping": "^2.2.0",
     "@rollup/pluginutils": "^4.2.1",
     "@unocss/config": "workspace:*",
     "@unocss/core": "workspace:*",
+    "magic-string": "^0.26.2",
     "unplugin": "^0.7.0",
     "webpack-sources": "^3.2.3"
   },
diff --git a/packages/webpack/src/index.ts b/packages/webpack/src/index.ts
index ef9a75f6eb..89d720c623 100644
--- a/packages/webpack/src/index.ts
+++ b/packages/webpack/src/index.ts
@@ -2,18 +2,11 @@ import type { UserConfig, UserConfigDefaults } from '@unocss/core'
 import type { ResolvedUnpluginOptions, UnpluginOptions } from 'unplugin'
 import { createUnplugin } from 'unplugin'
 import WebpackSources from 'webpack-sources'
-import {
-  HASH_PLACEHOLDER_RE,
-  LAYER_MARK_ALL,
-  LAYER_PLACEHOLDER_RE,
-  createContext,
-  getHash,
-  getHashPlaceholder,
-  getLayerPlaceholder,
-  getPath,
-  resolveId,
-  resolveLayer,
-} from '../../shared-integration/src'
+import { createContext } from '../../shared-integration/src/context'
+import { getHash } from '../../shared-integration/src/hash'
+import { HASH_PLACEHOLDER_RE, LAYER_MARK_ALL, LAYER_PLACEHOLDER_RE, getHashPlaceholder, getLayerPlaceholder, resolveId, resolveLayer } from '../../shared-integration/src/layers'
+import { applyTransformers } from '../../shared-integration/src/transformers'
+import { getPath } from '../../shared-integration/src/utils'
 
 export interface WebpackPluginOptions<Theme extends {} = {}> extends UserConfig<Theme> {}
 
@@ -29,8 +22,8 @@ export default function WebpackPlugin<Theme extends {}>(
   defaults?: UserConfigDefaults,
 ) {
   return createUnplugin(() => {
-    const context = createContext(configOrPath, defaults)
-    const { uno, tokens, filter, extract, onInvalidate } = context
+    const ctx = createContext<WebpackPluginOptions>(configOrPath as any, defaults)
+    const { uno, tokens, filter, extract, onInvalidate } = ctx
 
     let timer: any
     onInvalidate(() => {
@@ -38,9 +31,19 @@ export default function WebpackPlugin<Theme extends {}>(
       timer = setTimeout(updateModules, UPDATE_DEBOUNCE)
     })
 
+    const nonPreTransformers = ctx.uno.config.transformers?.filter(i => i.enforce !== 'pre')
+    if (nonPreTransformers?.length) {
+      console.warn(
+        // eslint-disable-next-line prefer-template
+        '[unocss] webpack integration only supports "pre" enforce transformers currently.'
+        + 'the following transformers will be ignored\n'
+        + nonPreTransformers.map(i => ` - ${i.name}`).join('\n'),
+      )
+    }
+
     const tasks: Promise<any>[] = []
     const entries = new Set<string>()
-    const hashs = new Map<string, string>()
+    const hashes = new Map<string, string>()
 
     const plugin = <UnpluginOptions>{
       name: 'unocss:webpack',
@@ -48,9 +51,13 @@ export default function WebpackPlugin<Theme extends {}>(
       transformInclude(id) {
         return filter('', id)
       },
-      transform(code, id) {
-        tasks.push(extract(code, id))
-        return null
+      async transform(code, id) {
+        const result = await applyTransformers(ctx, code, id, 'pre')
+        if (result == null)
+          tasks.push(extract(code, id))
+        else
+          tasks.push(extract(result.code, id))
+        return result
       },
       resolveId(id) {
         const entry = resolveId(id)
@@ -72,7 +79,7 @@ export default function WebpackPlugin<Theme extends {}>(
           if (entry)
             layer = resolveLayer(entry)
         }
-        const hash = hashs.get(id)
+        const hash = hashes.get(id)
         if (layer)
           return (hash ? getHashPlaceholder(hash) : '') + getLayerPlaceholder(layer)
       },
@@ -131,7 +138,7 @@ export default function WebpackPlugin<Theme extends {}>(
             : result.getLayer(layer) || ''
 
           const hash = getHash(code)
-          hashs.set(path, hash)
+          hashes.set(path, hash)
           plugin.__vfs.writeModule(id, code)
         })
     }
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 6e4653f7f3..b4f845b051 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -571,18 +571,22 @@ importers:
 
   packages/webpack:
     specifiers:
+      '@ampproject/remapping': ^2.2.0
       '@rollup/pluginutils': ^4.2.1
       '@types/webpack': ^5.28.0
       '@types/webpack-sources': ^3.2.0
       '@unocss/config': workspace:*
       '@unocss/core': workspace:*
+      magic-string: ^0.26.2
       unplugin: ^0.7.0
       webpack: ^5.73.0
       webpack-sources: ^3.2.3
     dependencies:
+      '@ampproject/remapping': 2.2.0
       '@rollup/pluginutils': 4.2.1
       '@unocss/config': link:../config
       '@unocss/core': link:../core
+      magic-string: 0.26.2
       unplugin: 0.7.0_webpack@5.73.0
       webpack-sources: 3.2.3
     devDependencies:
diff --git a/test/fixtures/vite/package.json b/test/fixtures/vite/package.json
index d9de3c3dcf..48e43bb1c3 100644
--- a/test/fixtures/vite/package.json
+++ b/test/fixtures/vite/package.json
@@ -1,6 +1,6 @@
 {
-  "private": true,
   "version": "0.0.0",
+  "private": true,
   "scripts": {
     "dev": "vite",
     "build": "vite build"