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.

Answer 3

I had the same case with a file (config.json).

I decided to copy it with Copy-Webpack-Plugin

new CopyWebpackPlugin([
    // Copy directory contents to {output}/
    { from: 'config.json' }
  ]) 

After that, my file was in the output build directory. I used 'externals' property to reference my file in my webpack.config file :

  externals: {
    'config': "require('./config.json')"
  }

In my js file which load the config.json :

import config from 'config'

'config' load require('./config.json) which is the one in the output build directory.

I know it's tricky but I didn't find another solution to my problem. Maybe it will help someone.

EDIT

I had to use webpack in order to build because import config from 'config' wasn't understandable without it. That's why I replace :

externals: {
    './config.json': "require('./config.json')"
  }

and

var config = require('./config.json') //replace import config from 'config'

Without webpack, Javascript understand var config = require('./config.json') because it's the right path.

And when I build with webpack, it change by require('./config.json') when it sees './config.json', so it works

Answer 4

The behavior that I was originally looking for now seems to be described under the feature called Lazy Loading. The feature leverages Dynamic Imports as a replacement for the previously used require.ensure way of importing dynamic resources.

Since I don't have a example of my own to share here I'll leave this answer open as a Community Wiki answer for anybody else who would like to contribute one.

Answer 5

For Webpack 5:

Assume you need to load a config file at runtime. File config.json:

{
    "secret": "xxxccccvvvvXXXCCCVVV",
    "password": "1234567890"
}

And in your webpack.(config|common|prod|dev).js file:

const configFile = require('./path/to/your/config.json');
const { DefinePlugin } = require('webpack');
// ...rest of imports

function getConfig() { // Maybe move to a helper directory *shrugs*
   return JSON.stringify(configFile);
}

module.exports = {
...(rest of webpack configuration)

   plugins: [
      new DefinePlugin({
         common_config: DefinePlugin.runtimeValue(getConfig, true)
      })
   ]
}

Finally, if you use eslint, add this so the compiler doesn't complain:

"globals": {
   "common_config": "readonly"
}

Now in your app, you have access to common_config at all times (no imports needed)