How to export JSON files as seperate chunks in webpack?

Question

I'm building a webapp with webpack and having some problems I can't figure out my self or with the documentation.

What I'd like to achieve is to configure webpack as such as it doesn't include one particular json file or all of them into the main bundle. But, it should still be possible to require them as like this:

define(['app/config.json'], function (config) {
...
});

My current webpack configuration for json files looks like this:

module: { 
    loaders: [
        { 
            test: /\.json/, 
            loader: "json" 
        },
        // ...
    ]
}

The above shown configuration loads the JSON file, parses it and modules that require them simply get an instantiated js object. Marvelous! The config.json files contains some installation specific variables which should be editable by the user of the application.

When using the file-loader like this:

        { 
            test: /\.json/, 
            loader: "file",
            query: {
                name: 'res/[name].[ext]'
            }  
        },

the JSON file is not included in the bundle, but requiring it doesn't load the file, it simply returns the filename. Any ideas?

Answer 1

the JSON file is not included in the bundle, but requiring it doesn't load the file, it simply returns the filename. Any ideas?

That's the whole point of file-loader. This is the reason why it works so well with assets like images. It probably won't work for your use case, though, as you would have to query the file based on the returned path itself (against your idea).

If you explicitly want to separate that JSON, maybe you could use the CommonsChunkPlugin for that. This would mean you would have to implement a separate entry point that exposes the data. It could be something trivial like this:

module.exports = require('app/config.json');

You would then point at this proxy from your application. CommonsChunkPlugin would deal with your splitting requirement.