How to load an external config file in a Webpack-React application without bundling it?
Question
I have a web application that is written with React and bundled with Webpack. The application has a JSON config file that I want to include at runtime and not to be bundled with webpack.
In my entry point for the application I am importing the contents using the json-loader but doing that forces the file to be embedded in the application and I can't update the config file once it's been bundled.
How can I configure my webpack.config.js file to exclude my config.json file but still let me import it in my application? It's not a module so I don't know if it can be included in the externals section of my webpack.config.js
I tried using require.ensure but all I see now is the contents of config.json bundled into a 1.1.bundle.js file and changing the config file does nothing.
app.js
let config;
require.ensure(['./config.json'], require => {
config = require('./config.json');
});
2 answers
solution1
2 2016-10-16 18:34:26
If your config is not so confidential, you could do this in your index.html
<script>
var initialState = {
config: {
idleTime: 120,
fetchStatusInterval: 8,
dataPath: 'somepath.json',
},
};
window.__INITIAL_STATE__ = initialState;
</script>
<script src="static/bundle.js"></script>
And in your react application get your config with
const applicationInitialState = window.__INITIAL_STATE__;
const config = applicationInitialState.config;
solution2
1 ACCPTED 2016-10-19 13:26:16
I ended up using a modified version of that to load my script externally. My application doesn't require the config immediately so the async aspect doesn't make a difference here.
I placed this at the top of my <head> in applications entry page with a co-located config file.
<head>
... other scripts
<script>
var config= window.config|| {};
$.getJSON('config.json', function(response) {
config= response;
});
</script>
</head>
<body>
<div id='root'/>
<script src='dist/app.bundle.js'></script>
</body>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.