在 Webpack 中加载静态 JSON 文件

发布于05月02日

我的代码中有以下 struct :

var getMenu = function () {
    return window.fetch("portal/content/json/menu.json").then(function (data) {
        return data.json();
    });
};

我试着在我的webpack.config.js分钟内:

module: {
    loaders: [
        ...
        {
            test: /\.json$/,
            exclude: /node_modules/,
            use: [
                'file-loader?name=[name].[ext]&outputPath=portal/content/json'
            ]
        },
        ...
   ]
}

Project structure:

dist
  content
     json
        menu.json <- this is missing

src
  content
     json
       menu.json <- source file

Question:

webpack如何将src/content/json/menu.json复制到dist/content/json/menu.json？

推荐答案

您正在使用fetch来请求一个JSON文件，而这只会在运行时发生.此外，webpack只加工进口的任何东西.您希望它处理函数的参数，但如果webpack这样做了，函数的每个参数都将被视为一个模块，从而 destruct 了该函数的任何其他用途.

If you want your loaders to kick in, you can import the file.

import './portal/content/json/menu.json';

You can also import the JSON and use it directly instead of fetching it a runtime. Webpack 2 uses json-loader by default for all .json files. You should remove the .json rule and you would import the JSON as follows.

import menu from './portal/content/json/menu.json';

menu是从getMenu函数中获得的相同JavaScript对象.

在 Webpack 中加载静态 JSON 文件

推荐答案

Json相关问答推荐

JOLT转换过滤出特定值/对象

Jolt变换将字段移动到数组的每个元素中

jq如何合并两个json对象

Powershell解析JSON文件中的键或值

Jolt 不打印任何东西

Golang gin接收json数据和图片

将 JSON 字符串解析为 Kotlin Android 中的对象列表(MOSHI？)

为什么解析的字典相等而腌制的字典不相等？

jolt 通配符如何用于 RHS？

Oracle Apex - 将 JSON 对象分配给变量以返回

当值包含ansible中的字符串时解析json值

从ruby中的json获取特定的键值

如何比较 JSON 文档并返回与 Jackson 或 Gson 的差异？

如何对使用转换器的 Grails 服务进行单元测试？

IE中Json响应下载(7~10)

jQuery循环.each()JSON键/值不起作用

jQuery JSON 响应总是触发 ParseError

有什么方法可以判断您安装的 gulp 版本吗？

请求返回字节，我无法解码它们

python追加到json对象中的数组