Menu
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');
});
279
Using the externals option, you can add configuration data for your application that can be accessed anywhere in the JavaScript files. In your webpack. config. js file, add an externals options and set its value to an object containing the config data.
You can create webpack. config. js file and export rewired config using following snippet: const { paths } = require('react-app-rewired'); // require normalized overrides const overrides = require('react-app-rewired/config-overrides'); const config = require(paths.
Create React App (CRA) ships with webpack already under the hood, but usually, we would need to add more configurations as our app grows. Luckily for us, we can create a webpack. config. js file and put our webpack configurations in there.
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;
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>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With