Webpack -- 包含配置文件作为外部资源

Question

随着应用程序的增长，是时候从代码中删除硬编码的东西了。是时候实施正确的配置文件了。

我正在考虑使用 webpack，并包含配置文件，所以我可以在 react.js 应用程序中使用它。

这就是我所做的（webpack.config）：

var path = require('path');
var webpack = require('webpack');
module.exports = {
entry: [
  './src/app.js'
],
output: {
  path: path.join(__dirname, 'public/js'),
  filename: 'app.built.js'
},
externals: {
  'Configurator':  require('./config/config-dev.json')
},
module: {
  loaders: [
    { test: /\.js$/, exclude: /node_modules/, loader: 'babel?presets[]=es2015&presets[]=react' },
    { test: /\.css$/, loader: "style-loader!css-loader" }
  ]
}
 };

我的 JSON 文件：

{
 "product": {
 "getProducts": "/product",
 "updateProduct": "/updateproduct",
 "deleteProduct": "/deleteproduct"
},
 "project": {
 "getProjects": "/project",
 "updateProduct": "/updateproject",
 "deleteProduct": "/deleteproject"    
}  
}

在 React 组件中的一个组件中，我尝试这样做：

var MyFile = require('Configurator');

没有错误，webpack 找到了文件。在控制台中我看到了这个：

var MyFile = __webpack_require__(412);

但 MyFile 未定义。

我做错了什么？

Answer 1

require 自动解析 JSON 文件。 externals 需要一个字符串来评估，所以你需要对对象进行字符串化：

externals: {
  'Configurator': JSON.stringify(require('./config/config-dev.json'))
},