Загрузить статический файл JSON в Webpack

У меня где-то в моем коде следующая конструкция:

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-loader по умолчанию для всех файлов .json. Вы должны удалить правило .json, и вы импортируете JSON следующим образом.

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

menu - это тот же объект JavaScript, который вы получите от вашей функции getMenu.

Ответ 2

если вы хотите, чтобы ваш json был загружен во время выполнения/отложено, вы можете использовать потрясающую функцию динамического импорта веб-пакетов:

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

Хорошего дня