webpack-virtual-modules
    TypeScript icon, indicating that this package has built-in type declarations

    0.4.3 • Public • Published

    Webpack Virtual Modules

    Build Status Twitter Follow

    Webpack Virtual Modules is a plugin that allows for dynamical generation of in-memory virtual modules for JavaScript builds created with webpack. When virtual module is created all the parent virtual dirs that lead to the module filename are created too. This plugin supports watch mode meaning any write to a virtual module is seen by webpack as if a real file stored on disk has changed.

    Installation

    Use NPM or Yarn to install Webpack Virtual Modules as a development dependency:

    # with NPM
    npm install webpack-virtual-modules --save-dev
    
    # with Yarn
    yarn add webpack-virtual-modules --dev

    Usage

    You can use Webpack Virtual Modules with webpack 5, 4 and 3. The examples below show the usage with webpack 5 or 4. If you want to use our plugin with webpack 3, check out a dedicated doc:

    Generating static virtual modules

    Require the plugin in the webpack configuration file, then create and add virtual modules in the plugins array in the webpack configuration object:

    var VirtualModulesPlugin = require('webpack-virtual-modules');
    
    var virtualModules = new VirtualModulesPlugin({
      'node_modules/module-foo.js': 'module.exports = { foo: "foo" };',
      'node_modules/module-bar.js': 'module.exports = { bar: "bar" };'
    });
    
    module.exports = {
      // ...
      plugins: [
        virtualModules
      ]
    };

    You can now import your virtual modules anywhere in the application and use them:

    var moduleFoo = require('module-foo');
    // You can now use moduleFoo
    console.log(moduleFoo.foo);

    Generating dynamic virtual modules

    You can generate virtual modules dynamically with Webpack Virtual Modules.

    Here's an example of dynamic generation of a module. All you need to do is create new virtual modules using the plugin and add them to the plugins array. After that, you need to add a webpack hook. For using hooks, consult webpack compiler hook documentation.

    var webpack = require('webpack');
    var VirtualModulesPlugin = require('webpack-virtual-modules');
    
    // Create an empty set of virtual modules
    const virtualModules = new VirtualModulesPlugin();
    
    var compiler = webpack({
      // ...
      plugins: [
        virtualModules
      ]
    });
    
    compiler.hooks.compilation.tap('MyPlugin', function(compilation) {
      virtualModules.writeModule('node_modules/module-foo.js', '');
    });
    
    compiler.watch();

    In other module or a Webpack plugin, you can write to the module module-foo whatever you need. After this write, webpack will "see" that module-foo.js has changed and will restart compilation.

    virtualModules.writeModule(
      'node_modules/module-foo.js',
      'module.exports = { foo: "foo" };'
    );

    More Examples

    API Reference

    Inspiration

    This project is inspired by virtual-module-webpack-plugin.

    License

    Copyright © 2017 SysGears INC. This source code is licensed under the MIT license.

    Install

    npm i webpack-virtual-modules

    DownloadsWeekly Downloads

    2,628,329

    Version

    0.4.3

    License

    MIT

    Unpacked Size

    79.3 kB

    Total Files

    22

    Last publish

    Collaborators

    • vicvlas