Any way to use webpack to load a resource at runtime?

Question

I have a single .json file that contains configuration stuff that I would like to reference from another script file using the typical import/require syntax. Currently I'm using webpack to resolve these dependencies and bundle them for me. This file however I want to be loaded at runtime and was hoping that there might be some type of loader that could resolve and load this file for me at runtime. So far I haven't found anything that matches my needs exactly.

Example:

var jQuery = require('jQuery'); var sol = require('some-other-lib'); var myConfig = require('/real/production/url/myconfig.json');  console.log(myConfig.myFavoriteSetting); 

In the example above I'd like to have myconfig.json resolved and loaded at runtime.

Possibly related questions:

• how to use webpack to load CDN or external vendor javascript lib in js file, not in html file
• Webpack - dynamic require and paths
• Require JS files dynamically on runtime using webpack

Answer 1

I think what you want is require.ensure, webpack's code splitting. The modules that you 'ensure' are put into a separate bundle, and when your 'ensure' executes at runtime, the webpack runtime automatically fetches the bundle via ajax. Note the callback syntax for ensure -- your callback runs when the bundle has finished loading. You still need to require the desired modules at that point; .ensure just makes sure they're available.

Code splitting is one of webpack's major features, it lets you load only what you need at any given time. There's plugins etc. to optimize the multiple bundles as well.

Answer 2

With Webpack 2, you can use System.import. It uses the Promise API. AFAIK, currently there's no way to have async/await code run in the browser. I believe Babel can only transpile async/await down to ES2015 so only the latest version of Node (v6.x) can run it. I don't think browsers are capable of understanding it yet because the transpiled code uses generators.

For System.import please note that some older browsers (IE 11 and below I believe) will require you to polyfill the Promise API. Check out polyfill.io for that.

If you REALLY want to use async/await in the browser, you might be able to do a full polyfill for ES2015.