VirtualUrlPlugin

다양한 유형의 가상 모듈을 생성할 수 있습니다. 예를 들어 .ts, .json, .css 등이 있으며, 기본값은 .js입니다.

5.100.0+
import webpack from "webpack";

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

src/app.js

import { msg } from "virtual:myModule";

console.log(msg);

Basic Example

빌드 정보를 생성하는 가상 모듈을 만듭니다.

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}`);

사용자 정의 스키마 사용

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);

Advanced Example

다양한 유형의 가상 모듈을 여러 개 생성합니다.

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";

라우팅 파일을 가상화합니다.

import path from "node:path";
import { fileURLToPath } from "node:url";
import webpack from "webpack";

// For compatibility with older Node.js versions
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

import { routes } from "virtual:routes";

Options

  • module.type (string): 가상 모듈의 콘텐츠 유형.
  • module.source (string | ((loaderContext: import('webpack').LoaderContext<T>) => Promise<string> | string)): 가상 모듈의 콘텐츠를 생성하는 팩토리 함수.

  • module.version(boolean | string | () => string): 무효화가 발생하면 버전의 값이 이전과 다를 경우 소스 함수가 다시 호출됩니다. true로 설정하면 항상 트리거됩니다.

  • schema (string): 사용자 정의 가능한 가상 모듈 스키마, 기본값은 virtual입니다.

1 Contributor

xiaoxiaojx