Question

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

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

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

我尝试使用require.ensure，但我现在看到的是捆绑到1.1.bundle.js文件中的config.json的内容，更改配置文件什么都不做。

app.js

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

Answer 1

如果您的配置不是那么保密，您可以在index.html中执行此操作

<script>
  var initialState = {
    config: {
      idleTime: 120,
      fetchStatusInterval: 8,
      dataPath: 'somepath.json',
    },
  };
  window.__INITIAL_STATE__ = initialState;
</script>
<script src="static/bundle.js"></script>

在你的反应中通过

获取配置

const applicationInitialState = window.__INITIAL_STATE__;
const config = applicationInitialState.config;

Answer 2

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

我把它放在应用程序输入页面中<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>

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

2 个答案: