在 Webpack 中加载静态 JSON 文件

我的代码中有以下构造：

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

我尝试在我的webpack.config.js this:

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 to dist/content/json/menu.json ?

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

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

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

您还可以导入 JSON 并直接使用它，而不是在运行时获取它。 Webpack 2 使用json-loader https://github.com/webpack-contrib/json-loader默认为所有.json文件。你应该删除.json规则，您将按如下方式导入 JSON。

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

menu与您从您的应用程序中获得的 JavaScript 对象相同getMenu功能。