在 Webpack 中加载静态 JSON 文件

Posted 2023-02-22

【中文标题】在 Webpack 中加载静态 JSON 文件

【英文标题】：Load static JSON file in Webpack

【发布时间】：2017-09-29 20:03:06

【问题描述】：

我的代码中有以下构造：

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'
            ]
        ,
        ...
   ]

项目结构：

dist
  content
     json
        menu.json <- this is missing

src
  content
     json
       menu.json <- source file

问题：

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

【参考方案1】：

您正在使用 fetch 请求 JSON 文件，这只会在运行时发生。此外，webpack 只处理导入的任何内容。你希望它处理函数的参数，但如果 webpack 这样做了，函数的每个参数都将被视为一个模块，这会破坏该函数的任何其他用途。

如果您希望加载程序启动，您可以导入文件。

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

您还可以导入 JSON 并直接使用它，而不是在运行时获取它。 Webpack 2 默认对所有 .json 文件使用 json-loader。您应该删除 .json 规则，然后按如下方式导入 JSON。

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

menu 与您从 getMenu 函数获得的 javascript 对象相同。

【讨论】：

我使用了你给的后一个选项，但我得到了找不到模块'givenPath'。

不使用fetch怎么办？是否可以按照 OP 的要求进行操作？

【参考方案2】：

如果您希望在运行时/延迟中加载 json，您可以使用很棒的 webpack 的 dynamic imports 功能：

import(
    /* webpackChunkName: "json_menu" */
    './portal/content/json/menu.json'
);

它将返回一个解析为模块对象的 Promise，其中包含您的数据的“默认”字段。所以你可能想要这样的东西（用 es6 看起来真的很不错）：

import(
    /* webpackChunkName: "json_menu" */
    './portal/content/json/menu.json'
).then((default: jsonMenu) => 
    // do whatever you like with your "jsonMenu" variable
    console.log('my menu: ', jsonMenu);
);

注意动态导入需要babel插件syntax-dynamic-import，用npm安装：

npm i babel-plugin-syntax-dynamic-import -D

祝你有美好的一天

【讨论】：

这是一个不错的 fetch 替代方案，但仍然没有告诉我如何让 webpack 将 json 文件写入 dist 文件夹。

@Luminous 它会自动在那里，无论你在哪里导入的东西都会在编译期间变成块（参见 webpackChunkName: "json_menu"）。最终的文件名和路径将由 webpack 配置决定——如果你对生成的名称不满意——你可以利用代码拆分名称回调来微调它