Как получить доступ к json через webpack?

Question

[Denis78656]

Привет!

Подключаю в js-файле:
let name = require('../hello.json');
Вебпак делает сборку, json файл копируется в папку сборки с помощью file-loader.
Но если запустить созданный вебпаком js-файл и обратиться к переменной name, то мы получим, что
name = '../hello.json'

В чем ошибка и как вообще нужно подключать через вебпак правильно json файлы, чтобы можно их было использовать в скрипте.

Answer 1

[Анатолий Жаров]

следует использовать raw-loader вместо file-loader'а

Comments

[Denis78656]

вы не подскажите? если я вынес команду let name = require('../hello.json'); в отдельный js и его подключил в главном js файле import './anotherScript.js';
теперь raw-loader не видит json файла и его нет в папке сборки, хотя путь к нему не менялся.

[Анатолий Жаров]

Denis78656, raw-loader не перемещает файлы в папку сборки. Все что он делает - берет и вставляет на место require содержимое файла в виде строки@Denis78656,

[Анатолий Жаров]

Denis78656, а, понял вопрос)) у каждого модуля изолированная область видимости. Переменную name надо экспортировать из anotherScript, в а главном js файле ее надо импортировать

[Denis78656]

мне в основном скрипте (точке входа) сами данные из json не нужны, просто из-за того что let name = require('../hello.json'); ушло в другой js, в итоговой сборке его нет.
Я пробовал и экспортировать через module.exports и через export (из ES6), переменная в основном скрипте видна, а в папке сборки json нет

[Анатолий Жаров]

Denis78656, Не совсем понимаю, что все таки требуется от этого json. Есть возможность поделиться кодом?

[Denis78656]

там данные для первичного заполнения формы, а конкретнее списки для select. Сейчас вебпак нормально переносит json файл в папку сборки, где я могу открыть index.html и форма заполнится данными, при условии что все данные для заполнения формы и подключения json находится в главном файле main.js, но стоит выделить это в отдельный js файл, который подключаем к основному с помощью import 'pathToFile'; и в папке сборки папки с json нет и после запуска форма естественно пустая.

[Анатолий Жаров]

Denis78656, при импорте json используются относительные пути? Они не сломались при переносе логики заполнения в другой файл?

[Denis78656]

нет, отдельный файл находится в одной папке с основным. В нем эти данные доступны.
Мне, кажется, проблема в самой сборке. Вот участок с json:

{
            test: /\.json$/,
            use: [{
                loader: 'raw-loader',
                options: {
                    name: '../db/[name].[ext]'
                }  
            }]
        }