virtual-url-plugin.mdx

title	VirtualUrlPlugin
group	webpack
contributors	xiaoxiaojx

Allow creating virtual modules of any type, such as .ts, .json, .css, etc. default is .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

Create a virtual module that generates build information

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

Use custom schema

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

Create multiple virtual modules of different types

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

Virtualize the routing file

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): Content type of the virtual module.

T> Make sure that these types have a loader set via module.rules.

• module.source (string | ((loaderContext: import('webpack').LoaderContext<T>) => Promise<string> | 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.