reactjs - 如何创建一个配置文件来响应并防止 webpack 捆绑它？

Question

我在应用程序中添加了一个 config.json。

在 webpack.config.js 我定义了 Config

externals: {
    'Config': JSON.stringify(production ? require('./config.prod.json') : require('./config.dev.json'))
},

在应用程序中我需要配置并使用它

var Config = require('Config');

但是，webpack 将我的配置文件捆绑到 index.js（我的 webpack 输出文件）中，我不想要这个。我想让我的 config.json 与 index.js 分开为了实现这一点，我排除了我的 config.json 但它不起作用。

exclude: [/node_modules/, path.resolve(__dirname, 'config.dev.json'), path.resolve(__dirname, 'config.prod.json')]

如果我错过了什么，你能帮我吗？谢谢

score 0 · Accepted Answer

正如@thedude 所述，您可以使用 webpack 的代码拆分功能。import config from 'config.json'您可以使用非常酷的代码拆分功能，而不是简单地这样做。

require.ensure([], function(require) {
  let _config = require("config.json");
  this.setState({
    _configData: _config
  });
});

当你想使用的数据时config，通过检查状态来做到这一点

if(this.state._configData) { // this checks _configData is not undefined as well
  // use the data of config json
}

当您使用 webpack 编译代码时，将创建两个捆绑文件，bundle.js即0.bundle.js. 这0.bundle.js有你的config.json文件代码。

score -1 · Accepted Answer

2 回答 2