如何在不捆绑Webpack-React应用程序的情况下加载外部配置文件？

小编典典

如何在不捆绑Webpack-React应用程序的情况下加载外部配置文件？

reactjs

我有一个用React编写并与Webpack捆绑在一起的Web应用程序。该应用程序具有一个JSON配置文件，我想在运行时将其包含在内，而不是与webpack捆绑在一起。

在应用程序的入口点，我使用json-loader导入内容，但是这样做会强制将文件嵌入应用程序中，并且一旦捆绑了配置文件，便无法更新。

如何配置webpack.config.js文件以排除config.json文件，但仍允许我将其导入应用程序？它不是一个模块，所以我不知道它是否可以包含在externals我的webpack.config.js部分中

我尝试使用require.ensure，但现在看到的只是将config.json的内容捆绑到1.1.bundle.js文件中，更改配置文件没有任何作用。

app.js

let config;
require.ensure(['./config.json'], require => {
    config = require('./config.json');
});

阅读 267

2020-07-22

共1个答案

小编典典

我最终使用了该脚本的修改版本从外部加载脚本。我的应用程序不需要立即进行配置，因此异步方面在这里没有什么不同。

我将其<head>与位于同一位置的配置文件一起放在我的应用程序输入页面的顶部。

<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>

2020-07-22