如何在Webpack中将JSON文件导出为单独的块？

Question

我正在使用webpack构建一个webapp，但遇到一些我无法弄清自己或文档的问题。

我想要实现的是配置webpack，因为它不包含一个特定的json文件或将它们全部都包含在主包中。但是，仍然可以这样要求它们：

define(['app/config.json'], function (config) {
...
});

我当前的json文件的webpack配置如下所示：

module: { 
    loaders: [
        { 
            test: /\.json/, 
            loader: "json" 
        },
        // ...
    ]
}

上面显示的配置将加载JSON文件，对其进行解析，并且需要它们的模块只需获取实例化的js对象即可。奇妙！config.json文件包含一些特定于安装的变量，这些变量应可由应用程序的用户编辑。

当使用像这样的文件加载器时：

        { 
            test: /\.json/, 
            loader: "file",
            query: {
                name: 'res/[name].[ext]'
            }  
        },

捆绑包中不包含JSON文件，但要求它不加载文件，它只是返回文件名。有任何想法吗？

Answer 1

JSON 文件不包含在捆绑包中，但要求它不加载文件，它只是返回文件名。有任何想法吗？

这就是file-loader的全部意义。这就是为什么它能够很好地处理图像等资产的原因。不过，它可能不适用于您的用例，因为您必须根据返回的路径本身查询文件（与您的想法相反）。

如果您明确想要分离该 JSON，也许您可​​以使用CommonsChunkPlugin来实现。这意味着您必须实现一个单独的入口点来公开数据。它可能是这样的小事：

module.exports = require('app/config.json');

然后，您可以从应用程序中指向该代理。CommonsChunkPlugin将处理您的拆分需求。