Big update!Introducing GitHub Bot Commands. Learn more
Socket
Log inDemoInstall

webpack-virtual-modules

Package Overview
Dependencies
0
Maintainers
1
Versions
24
Issues
File Explorer

Advanced tools

webpack-virtual-modules

Webpack Virtual Modules

    0.5.0latest
    Github

Version published
Maintainers
1
Weekly downloads
8,658,836
increased by8.26%

Weekly downloads

Readme

Source

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.

Keywords

FAQs

What is webpack-virtual-modules?

Webpack Virtual Modules

Is webpack-virtual-modules popular?

The npm package webpack-virtual-modules receives a total of 8,387,642 weekly downloads. As such, webpack-virtual-modules popularity was classified as popular.

Is webpack-virtual-modules well maintained?

We found that webpack-virtual-modules demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago.It has 1 open source maintainer collaborating on the project.

Last updated on 11 Dec 2022

Did you know?

Socket installs a Github app to automatically flag issues on every pull request and report the health of your dependencies. Find out what is inside your node modules and prevent malicious activity before you update the dependencies.

Install Socket
Socket[email protected]

Product

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc