如何在 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 将处理您的拆分要求。