Require JS files dynamically on runtime using webpack

Question

I am trying to port a library from grunt/requirejs to webpack and stumbled upon a problem, that might be a game-breaker for this endeavor.

The library I try to port

Answer 1

You can also try using a library such as this: https://github.com/Venryx/webpack-runtime-require

Disclaimer: I'm its developer. I wrote it because I was also frustrated with the inability to freely access module contents at runtime. (in my case, for testing from the console)

Answer 2

There is concept named context (http://webpack.github.io/docs/context.html), it allows to make dynamic requires.

Also there is a possibility to define code split points: http://webpack.github.io/docs/code-splitting.html

function loadInContext(filename) { 
    return new Promise(function(resolve){
        require(['./'+filename], resolve);
    })
}

function loadModules(namesInContext){
    return Promise.all(namesInContext.map(loadInContext));
}

And use it like following:

loadModules(arrayOfFiles).then(function(){
    modules.forEach(function(module){
        module(moduleAPI);
    })
});

---

But likely it is not what you need - you will have a lot of chunks instead of one bundle with all required modules, and likely it would not be optimal..

It is better to define module requires in you config file, and include it to your build:

// modulesConfig.js
module.exports = [
   require(...),
   ....
]

// run.js
require('modulesConfig').forEach(function(module){
    module(moduleAPI);
})

Answer 3

So I found that my requirement to have some files loaded on runtime, that are only available on "app-compile-time" and not on "library-compile-time" is not easily possible with webpack.

I will change the mechanism, so that my library doesn't require the files anymore, but needs to be passed the required modules. Somewhat tells me, this is gonna be the better API anyways.

edit to clarify:

Basically, instead of:

# in my library
load = (path_to_file) ->
  (require path_to_file).do_something()

# in my app (using the 'compiled' libary)
cool_library.load("file_that_exists_in_my_app")

I do this:

# in my library
load = (module) ->
  module.do_something()

# in my app (using the 'compiled' libary)
module = require("file_that_exists_in_my_app")
cool_library.load(module)

The first code worked in require.js but not in webpack.

In hindsight i feel its pretty wrong to have a 3rd-party-library load files at runtime anyway.