70d2d5fafb439e36d942f85550337e9453b094d1c9977f4a4526e9121aca0c993956b15839fc1794d18a26c7c4ad9e98280cf84682a05316bc3c3013c29ea0 4.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131
  1. # Webpack Virtual Modules
  2. [![npm version][npm-version-src]][npm-version-href]
  3. [![npm downloads][npm-downloads-src]][npm-downloads-href]
  4. [![License][license-src]][license-href]
  5. **Webpack Virtual Modules** is a plugin that allows for dynamical generation of in-memory virtual modules for JavaScript
  6. 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
  7. if a real file stored on disk has changed.
  8. ## Installation
  9. Use NPM or Yarn to install Webpack Virtual Modules as a development dependency:
  10. ```bash
  11. # with NPM
  12. npm install webpack-virtual-modules --save-dev
  13. # with Yarn
  14. yarn add webpack-virtual-modules --dev
  15. ```
  16. ## Usage
  17. 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:
  18. * [Webpack Virtual Modules with Webpack 3]
  19. ### Generating static virtual modules
  20. Require the plugin in the webpack configuration file, then create and add virtual modules in the `plugins` array in the
  21. webpack configuration object:
  22. ```js
  23. var VirtualModulesPlugin = require('webpack-virtual-modules');
  24. var virtualModules = new VirtualModulesPlugin({
  25. 'node_modules/module-foo.js': 'module.exports = { foo: "foo" };',
  26. 'node_modules/module-bar.js': 'module.exports = { bar: "bar" };'
  27. });
  28. module.exports = {
  29. // ...
  30. plugins: [
  31. virtualModules
  32. ]
  33. };
  34. ```
  35. You can now import your virtual modules anywhere in the application and use them:
  36. ```js
  37. var moduleFoo = require('module-foo');
  38. // You can now use moduleFoo
  39. console.log(moduleFoo.foo);
  40. ```
  41. ### Generating dynamic virtual modules
  42. You can generate virtual modules **_dynamically_** with Webpack Virtual Modules.
  43. Here's an example of dynamic generation of a module. All you need to do is create new virtual modules using the plugin
  44. and add them to the `plugins` array. After that, you need to add a webpack hook. For using hooks, consult [webpack
  45. compiler hook documentation].
  46. ```js
  47. var webpack = require('webpack');
  48. var VirtualModulesPlugin = require('webpack-virtual-modules');
  49. // Create an empty set of virtual modules
  50. const virtualModules = new VirtualModulesPlugin();
  51. var compiler = webpack({
  52. // ...
  53. plugins: [
  54. virtualModules
  55. ]
  56. });
  57. compiler.hooks.compilation.tap('MyPlugin', function(compilation) {
  58. virtualModules.writeModule('node_modules/module-foo.js', '');
  59. });
  60. compiler.watch();
  61. ```
  62. In other module or a Webpack plugin, you can write to the module `module-foo` whatever you need. After this write,
  63. webpack will "see" that `module-foo.js` has changed and will restart compilation.
  64. ```js
  65. virtualModules.writeModule(
  66. 'node_modules/module-foo.js',
  67. 'module.exports = { foo: "foo" };'
  68. );
  69. ```
  70. ## More Examples
  71. - [Swagger and JSDoc Example with Webpack 5]
  72. - [Swagger and JSDoc Example with Webpack 4]
  73. - [Swagger and JSDoc Example with Webpack 3]
  74. ## API Reference
  75. - [API Reference]
  76. ## Inspiration
  77. This project is inspired by [virtual-module-webpack-plugin].
  78. ## License
  79. Copyright © 2017 [SysGears INC]. This source code is licensed under the [MIT] license.
  80. [webpack virtual modules with webpack 3]: https://github.com/sysgears/webpack-virtual-modules/tree/master/docs/webpack3.md
  81. [webpack compiler hook documentation]: https://webpack.js.org/api/compiler-hooks/
  82. [swagger and jsdoc example with webpack 3]: https://github.com/sysgears/webpack-virtual-modules/tree/master/examples/swagger-webpack3
  83. [swagger and jsdoc example with webpack 4]: https://github.com/sysgears/webpack-virtual-modules/tree/master/examples/swagger-webpack4
  84. [swagger and jsdoc example with webpack 5]: https://github.com/sysgears/webpack-virtual-modules/tree/master/examples/swagger-webpack5
  85. [api reference]: https://github.com/sysgears/webpack-virtual-modules/tree/master/docs/API%20Reference.md
  86. [virtual-module-webpack-plugin]: https://github.com/rmarscher/virtual-module-webpack-plugin
  87. [MIT]: LICENSE
  88. [SysGears INC]: http://sysgears.com
  89. <!-- Badges -->
  90. [npm-version-src]: https://img.shields.io/npm/v/webpack-virtual-modules?style=flat
  91. [npm-version-href]: https://npmjs.com/package/webpack-virtual-modules
  92. [npm-downloads-src]: https://img.shields.io/npm/dm/webpack-virtual-modules?style=flat
  93. [npm-downloads-href]: https://npmjs.com/package/webpack-virtual-modules
  94. [license-src]: https://img.shields.io/github/license/sysgears/webpack-virtual-modules.svg?style=flat
  95. [license-href]: https://github.com/sysgears/webpack-virtual-modules/blob/main/LICENSE