如何在不捆綁Webpack-React應用程序的情況下加載外部配置文件？

Question

我有一個用React編寫並與Webpack捆綁在一起的Web應用程序。 該應用程序具有一個JSON配置文件，我想在運行時將其包含在內，而不是與webpack捆綁在一起。

在應用程序的入口點，我正在使用json-loader導入內容，但是這樣做會強制將文件嵌入應用程序中，並且一旦捆綁了配置文件，便無法更新。

如何配置webpack.config.js文件以排除config.json文件，但仍允許我將其導入應用程序？ 它不是一個模塊，所以我不知道它是否可以包含在我的webpack.config.js的externals部分中

我嘗試使用require.ensure，但現在看到的只是config.json的內容綁定到1.1.bundle.js文件中，更改配置文件無濟於事。

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>

並在您的react應用程序中獲取您的配置

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 個解決方案

解決方案1
2 2016-10-16 18:34:26

解決方案2
1 已采納 2016-10-19 13:26:16

如何在不捆綁Webpack-React應用程序的情況下加載外部配置文件？

問題描述

2 個解決方案

解決方案1 2 2016-10-16 18:34:26

解決方案2 1 已采納 2016-10-19 13:26:16

解決方案1
2 2016-10-16 18:34:26

解決方案2
1 已采納 2016-10-19 13:26:16