12

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

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

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

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

应用程序.js

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

2 回答 2

2

如果您的配置不是那么机密，您可以在 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;
于 2016-10-16T18:34:26.143 回答
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>
于 2016-10-19T13:26:16.153 回答