javascript 在Webpack中加载静态JSON文件

bq3bfh9z  于 11个月前  发布在  Java
关注(0)|答案(2)|浏览(147)

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

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

vwoqyblh

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对象。

ddarikpa

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

相关问题