From 1d11114323e845356e22ee69656c3c7ee1b353c3 Mon Sep 17 00:00:00 2001
From: xiaoxiaojx <784487301@qq.com>
Date: Sat, 24 May 2025 13:37:44 +0800
Subject: [PATCH 1/3] feat: Support VirtualUrlPlugin
---
src/content/plugins/virtual-url-plugin.mdx | 137 +++++++++++++++++++++
1 file changed, 137 insertions(+)
create mode 100644 src/content/plugins/virtual-url-plugin.mdx
diff --git a/src/content/plugins/virtual-url-plugin.mdx b/src/content/plugins/virtual-url-plugin.mdx
new file mode 100644
index 000000000000..b98ff132f439
--- /dev/null
+++ b/src/content/plugins/virtual-url-plugin.mdx
@@ -0,0 +1,137 @@
+---
+title: VirtualUrlPlugin
+group: webpack
+contributors:
+ - xiaoxiaojx
+---
+
+Allow creating virtual modules of any type, such as `.ts`, `.json`, `.css`, etc. default is `.js`.
+
+
+
+```javascript
+const webpack = require("webpack)
+
+new webpack.experiments.schemes.VirtualUrlPlugin({
+ myModule: `export const msg = "from virtual module"`
+});
+```
+
+**src/app.js**
+
+```javascript
+import { msg } from 'virtual:myModule';
+
+console.log(msg);
+```
+
+## Basic Example
+
+Create a virtual module that generates build information
+
+```javascript
+const webpack = require("webpack)
+
+new webpack.experiments.schemes.VirtualUrlPlugin({
+ buildInfo: {
+ source: () {
+ return `export const buildTime = ${+new Date()}`
+ },
+ version: true
+ }
+});
+```
+
+**src/app.js**
+
+```javascript
+import { buildTime } from 'virtual:buildInfo';
+
+console.log('App version: ', buildTime);
+```
+
+Use custom schema
+
+```javascript
+const webpack = require("webpack)
+
+new webpack.experiments.schemes.VirtualUrlPlugin({
+ myModule: `export const msg = "from virtual module"`
+}, "v");
+```
+
+**src/app.js**
+
+```javascript
+import { msg } from 'v:myModule';
+
+console.log(msg);
+```
+
+## Advanced Example
+
+Create multiple virtual modules of different types
+
+```javascript
+const webpack = require("webpack)
+
+new webpack.experiments.schemes.VirtualUrlPlugin({
+ myCssModule: {
+ type: ".css",
+ source: "body{background-color: powderblue;}",
+ },
+ myJsonModule: {
+ type: ".json",
+ source: `{"name": "virtual-url-plugin"}`,
+ },
+});
+```
+
+**src/app.js**
+
+```javascript
+import json from 'virtual:myJsonModule';
+import 'virtual:myCssModule';
+```
+
+Virtualize the routing file
+
+```javascript
+const webpack = require("webpack")
+const path = require("path)
+const watchDir = path.join(__dirname, "./src/routes")
+
+new webpack.experiments.schemes.VirtualUrlPlugin({
+ routes: {
+ source(loaderContext) {
+ // Use addContextDependency to monitor the addition or removal of subdirectories in watchDir to trigger the rebuilding of virtual modules.
+ loaderContext.addContextDependency(watchDir)
+
+ const files = fs.readdirSync(watchDir)
+ return `
+ export const routes = {
+ ${files.map(key => `${key.split(".")[0]}: () => import('./src/routes/${key}')`).join(",\n")}
+ }
+ `
+ },
+ }
+});
+```
+
+**src/app.js**
+
+```javascript
+import { routes } from 'virtual:routes';
+```
+
+## Options
+
+- `module.type` (`string`): Content type of the virtual module.
+
+T> Make sure that these types have a loader set via [module.rules](https://webpack.js.org/configuration/module/#modulerules).
+
+- `module.source` (`string | ((loaderContext: import('webpack').LoaderContext) => Promise | string))`: Factory function for generating the content of virtual module.
+
+- `module.version`(`boolean | string | () => string`): When a invalidate is triggered, the source function is called again if the value of the version is different from the previous one. If set to true it will always trigger.
+
+- `schema` (`string`): Customizable virtual module schema, default is `virtual`.
From c9af4715514d9a27c4007a004241dcb5f6ff8cd2 Mon Sep 17 00:00:00 2001
From: xiaoxiaojx <784487301@qq.com>
Date: Wed, 16 Jul 2025 23:59:26 +0800
Subject: [PATCH 2/3] fix: typo
---
src/content/plugins/virtual-url-plugin.mdx | 41 ++++++++++++----------
1 file changed, 22 insertions(+), 19 deletions(-)
diff --git a/src/content/plugins/virtual-url-plugin.mdx b/src/content/plugins/virtual-url-plugin.mdx
index b98ff132f439..854ebe7f5869 100644
--- a/src/content/plugins/virtual-url-plugin.mdx
+++ b/src/content/plugins/virtual-url-plugin.mdx
@@ -10,10 +10,10 @@ Allow creating virtual modules of any type, such as `.ts`, `.json`, `.css`, etc.
```javascript
-const webpack = require("webpack)
+const webpack = require('webpack');
new webpack.experiments.schemes.VirtualUrlPlugin({
- myModule: `export const msg = "from virtual module"`
+ myModule: `export const msg = "from virtual module"`,
});
```
@@ -30,7 +30,7 @@ console.log(msg);
Create a virtual module that generates build information
```javascript
-const webpack = require("webpack)
+const webpack = require("webpack")
new webpack.experiments.schemes.VirtualUrlPlugin({
buildInfo: {
@@ -53,11 +53,14 @@ console.log('App version: ', buildTime);
Use custom schema
```javascript
-const webpack = require("webpack)
+const webpack = require('webpack');
-new webpack.experiments.schemes.VirtualUrlPlugin({
- myModule: `export const msg = "from virtual module"`
-}, "v");
+new webpack.experiments.schemes.VirtualUrlPlugin(
+ {
+ myModule: `export const msg = "from virtual module"`,
+ },
+ 'v'
+);
```
**src/app.js**
@@ -73,15 +76,15 @@ console.log(msg);
Create multiple virtual modules of different types
```javascript
-const webpack = require("webpack)
+const webpack = require('webpack');
new webpack.experiments.schemes.VirtualUrlPlugin({
myCssModule: {
- type: ".css",
- source: "body{background-color: powderblue;}",
+ type: '.css',
+ source: 'body{background-color: powderblue;}',
},
myJsonModule: {
- type: ".json",
+ type: '.json',
source: `{"name": "virtual-url-plugin"}`,
},
});
@@ -97,24 +100,24 @@ import 'virtual:myCssModule';
Virtualize the routing file
```javascript
-const webpack = require("webpack")
-const path = require("path)
-const watchDir = path.join(__dirname, "./src/routes")
+const webpack = require('webpack');
+const path = require('path');
+const watchDir = path.join(__dirname, './src/routes');
new webpack.experiments.schemes.VirtualUrlPlugin({
routes: {
source(loaderContext) {
// Use addContextDependency to monitor the addition or removal of subdirectories in watchDir to trigger the rebuilding of virtual modules.
- loaderContext.addContextDependency(watchDir)
+ loaderContext.addContextDependency(watchDir);
- const files = fs.readdirSync(watchDir)
+ const files = fs.readdirSync(watchDir);
return `
export const routes = {
- ${files.map(key => `${key.split(".")[0]}: () => import('./src/routes/${key}')`).join(",\n")}
+ ${files.map((key) => `${key.split('.')[0]}: () => import('./src/routes/${key}')`).join(',\n')}
}
- `
+ `;
},
- }
+ },
});
```
From b0a2281f7f2ad137c75cd785dd455472ce4aee94 Mon Sep 17 00:00:00 2001
From: xiaoxiaojx <784487301@qq.com>
Date: Thu, 17 Jul 2025 00:01:17 +0800
Subject: [PATCH 3/3] fix: style
---
src/content/plugins/virtual-url-plugin.mdx | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/src/content/plugins/virtual-url-plugin.mdx b/src/content/plugins/virtual-url-plugin.mdx
index 854ebe7f5869..0c1a6752830a 100644
--- a/src/content/plugins/virtual-url-plugin.mdx
+++ b/src/content/plugins/virtual-url-plugin.mdx
@@ -30,7 +30,7 @@ console.log(msg);
Create a virtual module that generates build information
```javascript
-const webpack = require("webpack")
+const webpack = require('webpack')
new webpack.experiments.schemes.VirtualUrlPlugin({
buildInfo: {