Exposing a Javascript object as a module in webpack

Question

Inside webpack.config.js I have computed a javascript map that I'd like import as a module in the browser. I could write the data to disk and then read it back with e.g https://github.com/webpack/json-loader, but is there any more elegant ways to do this in-memory?

webpack.config:

var config = {
  key: 'data'    
}
// do something with webpack loaders

some.file.that.is.executed.in.browser.js:

var config = require('config')
window.alert('Config is', config.key)

Answer 1

webpack loaders are file preprocessor, thus there needs to be the file that you import. So create a dummy file and use json-string-loader to override the contents.

Create an empty config.json to your project.

In webpack.config.js:

var appConfig = {
  key: 'data'
}
...
loaders: [
{
    test: /config.json$/,
    loader: 'json-string-loader?json=' + JSON.stringify(appConfig)
}

In browser:

var appConfig = require("./config.json");
// => returns {key: 'data'}