Skip to content

Latest commit

 

History

History
99 lines (72 loc) · 2.93 KB

File metadata and controls

99 lines (72 loc) · 2.93 KB

Using Webpack Virtual Modules with Webpack 3

Installation

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

# with NPM
npm install webpack-virtual-modules --save-dev

# with Yarm
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 3. If you want to use our plugin with webpack 5 or 4, check out a dedicated section in README.md:

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 in other file
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");

var virtualModules = new VirtualModulesPlugin();

var compiler = webpack({
  // ...
  plugins: [
    virtualModules
  ]
});

compiler.plugin('watch', function(callback) {
  virtualModules.writeModule('node_modules/module-foo.js', '');
  callback();
});

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" };'
);

Examples