Friends, I'm trying to keep an external file out of the Webpack bundle, but to remain as a dependency - a settings file in this case. I've tried several variations of the following -
externals: {
'Settings': JSON.stringify(require('./settings.json'))
},
...but Webpack keeps including it in the bundle. The only examples I've found in the docs are of common presets like jQuery, nothing is mentioned of local but external files. Help? Thanks!
So after much research, the only way, as of writing this answer, to fetch an external file is to, in a way, ignore Webpack and simply add another script call to the index.html. This is what I ended up doing -
<body>
<div id="whatever-app-id"></div>
<script type="text/javascript" src="settings.js"></script>
<script type="text/javascript" src="app.js" defer></script>
</body>
For good measure, you can also add the webpack externals as mentioned in @gmaliar 's answer with reference to the global object declared in the settings.js file. However that's somewhat redundant as the object is global anyway.
Hope it helped anyone.
How about?
// Outside of webpack context
var fs = require("fs");
var settings = JSON.parse(fs.readFileSync('./settings.json', 'utf8'));
// Within webpack context
externals: {
'Settings': settings
}
