VirtualUrlPlugin
يسمح بإنشاء virtual modules من أي نوع، مثل .ts و.json و.css. النوع الافتراضي هو .js.
import webpack from "webpack";
new webpack.experiments.schemes.VirtualUrlPlugin({
myModule: 'export const msg = "من virtual module"',
});src/app.js
import { msg } from "virtual:myModule";
console.log(msg);مثال أساسي
إنشاء virtual module يصدّر معلومات عن build:
import webpack from "webpack";
new webpack.experiments.schemes.VirtualUrlPlugin({
buildInfo: {
source() {
return `export const buildTime = ${Date.now()}`;
},
version: true,
},
});src/app.js
import { buildTime } from "virtual:buildInfo";
console.log(`App version: ${buildTime}`);استخدام scheme مخصص:
import webpack from "webpack";
new webpack.experiments.schemes.VirtualUrlPlugin(
{
myModule: 'export const msg = "from virtual module"',
},
"v",
);src/app.js
import { msg } from "v:myModule";
console.log(msg);مثال متقدم
إنشاء عدة virtual modules بأنواع مختلفة:
import webpack from "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
import json from "virtual:myJsonModule";
import "virtual:myCssModule";محاكاة ملف routing:
import path from "node:path";
import { fileURLToPath } from "node:url";
import webpack from "webpack";
const __filename = fileURLToPath(import.meta.url);
const __dirname = path.dirname(__filename);
const watchDir = path.join(__dirname, "./src/routes");
new webpack.experiments.schemes.VirtualUrlPlugin({
routes: {
source(loaderContext) {
// استخدم addContextDependency لمراقبة الإضافات والحذف داخل مجلد routes
// حتى يعاد بناء virtual module عند تغير الملفات.
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
import { routes } from "virtual:routes";الخيارات
module.type(string): نوع محتوى virtual module.
module.source(string | ((loaderContext: import("webpack").LoaderContext<T>) => Promise<string> | string)): دالة factory التي تولد محتوى virtual module.module.version(boolean | string | () => string): عند حدوث invalidation، يتم استدعاءsourceمرة أخرى إذا كانت قيمة version مختلفة عن القيمة السابقة. تفعيلها يجعل module يعاد بناؤه دائمًا.schema(string): scheme مخصص للـ virtual module، والقيمة الافتراضية هيvirtual.
السابق ›
SplitChunksPlugin‹ التالي
WatchIgnorePlugin


