如何在Webpack-React应用程序中加载外部配置文件而不进行打包？

Question

如何在Webpack-React应用程序中加载外部配置文件而不进行打包？

reactjswebpackexternals

12

我有一个使用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');
});

- Ilvenis

你可以使用fetch()或node的http从http获取json文件。应用程序是在节点服务器和浏览器上运行还是仅在浏览器中运行？ - Ben Sidelinger

2个回答

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>

- Ilvenis

3

你是在确保配置文件可在dist/app.bundle.js中使用吗？ - Omnicon

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Doppio · Accepted Answer

如果您的配置不太机密，您可以在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;