sra sra - 1 year ago 164
Javascript Question

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

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.

sra sra
Answer Source

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).to_something()

# in my app (using the 'compiled' libary)

I do this:

# in my library
load = (module) ->

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

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.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download