javascript 在Webpack中加载静态JSON文件

bq3bfh9z 于 5个月前发布在 Java

关注(0)|答案(2)|浏览(78)

在我的代码中有如下构造：

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？

JavaScript

来源：https://stackoverflow.com/questions/43735486/load-static-json-file-in-webpack

2条答案

按热度按时间

vwoqyblh1#

您使用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对象。

赞(0）回复(0）举报 5个月前

ddarikpa2#

如果你希望你的json在运行时/延迟加载，你可以使用awesome webpack的动态导入功能：

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

字符串
它将返回一个Promise，它解析为模块对象，其中“default”字段包含您的数据。因此，您可能需要这样的东西（在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

型

赞(0）回复(0）举报 5个月前

我来回答

javascript 在Webpack中加载静态JSON文件

2条答案

相关问题

热门标签

最新问答