virtual-module-webpack-plugin-dynamic

Virtual Module Webpack Plugin

This is an experimental plugin that adds the contents of a virtual file to Webpack's cached file system without writing it to disk.

This would be used if you generated file contents at build time that needs to be consumed as a module by your source code, but you don't want to write this file to disk.

It uses private APIs of the CachedInputFileSystem of the enhanced-resolve package that Webpack uses as the module resolver. Therefore, it is inherently fragile and subject to be broken if the CachedInputFileSystem changes. However, the aspects of the CachedInputFileSystem that this plugin depends on hasn't changed since it was authored over three years ago.

See https://github.com/webpack/enhanced-resolve/blob/master/lib/CachedInputFileSystem.js

A major item that still needs testing is how this operates with the webpack-dev-server. If it causes the CachedInputFileSystem to purge all of its cache without triggering the resolve part of the resolver plugin lifecycle, the virtual file would no longer exist in the cache.

Usage

In your webpack.config.js, require the plugin:

const VirtualModulePlugin = require('./virtual-module-webpack-plugin');

Then when defining the config object create an instance of the plugin passing in the moduleName and contents and add it to the webpack config's plugins array.

The moduleName should be relative to your webpack config context which defaults to the directory holding the webpack.config.js file.

  plugins: [
    new VirtualModulePlugin({
      moduleName: 'src/mysettings.json',
      contents: JSON.stringify({ greeting: 'Hello!' })
    })
  ]

Then require the file as you would any other module in your source. The file contents will be passed through any loaders you setup that match the moduleName.

If you pass an object to contents, it will automatically be passed through JSON.stringify. You can also pass a function to contents which will be invoked at compile time with no arguments. See pull #10.

See the examples directory for a complete working examples with webpack 1.x or 2.x.

If you need to fetch the contents asynchronously, you need to have your webpack.config.js return a Promise. It should first resolve getting your module contents and then return the Webpack config.

A few development attempts were made at letting the plugin resolve the contents on demand, but we were unable to get Webpack to wait for a callback during the resolve stage. See pull requests #11 and #12. Pull requests to solve the problem are welcome, but it needs to work even if the asynchronous content request takes a while. You can uncomment code in test/integration/cases/contents-async/webpack.config.js to test it.

Here is an example of async content fetching inside webpack.config.js:

'use strict';

const VirtualModulePlugin = require('virtual-module-webpack-plugin');

function contents() {
  return new Promise(resolve => {
    setTimeout(() => {
      resolve('a');
    }, 1000);
  });
}

module.exports = contents().then(asyncContents => ({
  entry: './index',
  plugins: [
    new VirtualModulePlugin({
      moduleName: './a.txt',
      contents: asyncContents,
    }),
  ],
}));