VirtualUrlPlugin

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

const webpack = require('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

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

const webpack = require('webpack')

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

src/app.js

import { buildTime } from 'virtual:buildInfo';

console.log('App version: ', buildTime);

사용자 정의 스키마 사용

const webpack = require('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

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

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

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

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

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

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입니다.