How can I create a configuration file for react and prevent webpack bundling it?

Question

I added a config.json to application.

in webpack.config.js I defined Config

externals: {
    'Config': JSON.stringify(production ? require('./config.prod.json') : require('./config.dev.json'))
},

in application I required config and used it

var Config = require('Config');

However, webpack bundles my config file into index.js(my webpack output file) and I dont want this. I want to keep my config.json seperate from index.js To achieve this, I excluded my config.json but it did not work.

exclude: [/node_modules/, path.resolve(__dirname, 'config.dev.json'), path.resolve(__dirname, 'config.prod.json')]

Can you please help me if I miss something. Thanks

Do you want to load config.json separately? Or you dont need config.json at all in your app?? — iamsaksham, Apr 18 '17 at 08:09
I need config.json but I dont want to bundle it into webpack output file — Barny, Apr 18 '17 at 08:27

score 0 · Answer 1 · answered Apr 18 '17 at 08:35

As descibed by @thedude you can use webpack's code splitting feature. Instead of simply doing import config from 'config.json' you can use a really cool feature of code splitting.

require.ensure([], function(require) {
  let _config = require("config.json");
  this.setState({
    _configData: _config
  });
});

and when you want to use data of config, do that by checking state

if(this.state._configData) { // this checks _configData is not undefined as well
  // use the data of config json
}

When you will compile your code using webpack then two bundle files will be created i.e. bundle.js and 0.bundle.js. This 0.bundle.js has your code of config.json file.

score -1 · Answer 2 · edited Mar 02 '18 at 10:13

-1

You should use webpack's code splitting feature: https://webpack.js.org/guides/code-splitting/#src/components/Sidebar/Sidebar.jsx

edited Mar 02 '18 at 10:13

suther

12,600
4
62
99

answered Apr 18 '17 at 08:05

thedude

9,388
1
29
30

I don't believe this is the correct solution as it still bundles the config into the output files. The OP wants to keep the config files completely seperate from the webpack output (presumably so the config can change easily without having to rebundle the whole app) – Michael Peyper Apr 18 '17 at 11:44
This answer points to a feature that is irrelevant to the OP's request and does not try to explain. Moreover neither the answer from iamsaksham is correct (at least that one tries to elaborate) because the OP clearly asks for *distinct* and *separate* configurations for the DEV, PROD environments. This, which is the OP's main concern as I understand, is not addressed. – Nikos Paraskevopoulos Apr 18 '17 at 12:04
@NikosParaskevopoulos I disagree - the feature is not irrelevant as the OP clearly states he wishes to split the configurations file from the main index file. However since debating over the intention of the OP is quite pointless, I think the OP should clarify what he wants – thedude Apr 18 '17 at 12:28

How can I create a configuration file for react and prevent webpack bundling it?

2 Answers2