VirtualUrlPlugin 插件

webpackjsorg-main插件参考

VirtualUrlPlugin 插件

允许创建任何类型的虚拟模块，例如 .ts、.json、.css 等，默认为 .js。5.100.0+

js 复制代码

import webpack from "webpack";

new webpack.experiments.schemes.VirtualUrlPlugin({
  myModule: 'export const msg = "from virtual module"',
});

src/app.js

js 复制代码

import { msg } from "virtual:myModule";

console.log(msg);

基础示例

创建一个生成构建信息的虚拟模块

js 复制代码

import webpack from "webpack";

new webpack.experiments.schemes.VirtualUrlPlugin({
  buildInfo: {
    source() {
      return `export const buildTime = ${Date.now()}`;
    },
    version: true,
  },
});

src/app.js

js 复制代码

import { buildTime } from "virtual:buildInfo";

console.log(`App version: ${buildTime}`);

使用自定义 schema

js 复制代码

import webpack from "webpack";

new webpack.experiments.schemes.VirtualUrlPlugin(
  {
    myModule: 'export const msg = "from virtual module"',
  },
  "v",
);

src/app.js

js 复制代码

import { msg } from "v:myModule";

console.log(msg);

进阶示例

创建多个不同类型的虚拟模块

js 复制代码

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

js 复制代码

import json from "virtual:myJsonModule";
import "virtual:myCssModule";

将路由文件虚拟化

js 复制代码

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) {
      // 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

js 复制代码

import { routes } from "virtual:routes";

选项

module.type（string）：虚拟模块的内容类型。

提示： 确保这些类型已通过 module.rules 配置了相应的 loader。

module.source（string | ((loaderContext: import('webpack').LoaderContext<T>) => Promise<string> | string)）：用于生成虚拟模块内容的工厂函数。
module.version（boolean | string | () => string）：当触发 invalidate 时，如果 version 的值与上一次不同，将再次调用 source 函数。如果设置为 true，则始终触发。
schema（string）：可自定义的虚拟模块 schema，默认为 virtual。

帮助我们改进文档

发现翻译问题或内容错误？请告诉我们。