在Webpack中加载静态JSON文件

Question

我的代码在构造后的某个地方：

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？

Answer 1

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

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

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

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

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

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