How to dynamically add a module/dependency with a webpack plugin?

Question

I feel like what i'm trying to achieve isn't that hard.. but the webpack docs are in a serious disarray and I'm burning many hours on this.

How do i inject a "dynamic" module into a webpack build? I want to create this module at build time.

For a simple example how do i inject this string as a new module at build?

"module.exports = new Date();"

Then lets say I want that module to have the name "myDate"

I would very much like any other module in my application to be able to resolve it with:

var myDate = require('myDate');

Now this is a very simple example. My purpose will be much more complex and involve reading files to create this "dynamic" module. I'm aware of the define plugin and it unfortunately does not suit my needs.

I would greatly appreciate any help. Thanks.

One idea would be to do var myDate = require('./path/to/dynamically/generated/file'); then, at build time, you would create a file at that path using whatever means you wanted. Does that help at all? — jamesplease
– jamesplease, Commented Oct 21, 2016 at 5:35
@jmeas Yeah i did think of that too.. I wanted to avoid doing that because I'm adding cruft files into peoples file systems whom use my plugin. Also it has a long 'require' path to a physical file. Where i want more of an alias type thing. — jennas
– jennas, Commented Oct 21, 2016 at 5:39
You could also write a webpack loader plugin that generates the js, and passes it on to the webpack compile process. — Chris Seufert
– Chris Seufert, Commented Dec 7, 2016 at 23:18
@ChrisSeufert do you have an example? Or docs? I did look into this but was all so confusing. — jennas
– jennas, Commented Dec 8, 2016 at 2:35

Roman M. Koss · Accepted Answer · 2017-03-13 23:06:31Z

7

Found this plugin: virtual-module-webpack-plugin

Usage example described in README.md

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

  // ...

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

You can review implementation and try your own.

answered Mar 13, 2017 at 23:06

Roman M. Koss

9991 gold badge15 silver badges33 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to dynamically add a module/dependency with a webpack plugin?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related