CODEWITHSUNDEEP
javascriptrequirejswebpack
sra
sra

Reputation: 6408

Require JS files dynamically on runtime using webpack

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 has a function, that loads and evaluates multiple modules - based on their filenames that we get from a config file - into our app. The code looks like this (coffee):

loadModules = (arrayOfFilePaths) ->
  new Promise (resolve) ->
    require arrayOfFilePaths, (ms...) ->
      for module in ms
        module ModuleAPI
      resolve()

The require here needs to be called on runtime and behave like it did with requireJS. Webpack seems to only care about what happens in the "build-process".

Is this something that webpack fundamentally doesn't care about? If so, can I still use requireJS with it? What is a good solution to load assets dynamically during runtime?

edit: loadModule can load modules, that are not present on the build-time of this library. They will be provided by the app, that implements my library.

Upvotes: 27

Views: 26522

Answers (3)

sra
sra

Reputation: 6408

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.

Upvotes: 16

Venryx
Venryx

Reputation: 17979

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)

Upvotes: 2

Bogdan Savluk
Bogdan Savluk

Reputation: 6312

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);
})

Upvotes: 11

Related Questions