Предотвратить запуск загрузчиков Webpack по умолчанию

В Webpack встроен загрузчик JSON. Как я могу написать собственный загрузчик, который не пытается запустить встроенный загрузчик JSON на результат?

По сути, я хочу, чтобы мой загрузчик принял объект конфигурации (хранящийся в файле JSON) и сгенерировал исходный код из этой конфигурации, которая больше не является допустимым JSON, это JavaScript (который впоследствии может быть загружен через загрузчик babel).

Вот действительно глупый, надуманный пример. Исходный файл представляет собой файл JSON, но я хочу, чтобы на выходе моего загрузчика вместо этого был какой-то JS.

Загрузчик

function compile(doc) {
  return `alert(${JSON.stringify(doc.title)})`
}

function myLoader(source) {
  return compile(JSON.parse(source))
}

Конфигурация Webpack

rules: [
  {
    test: /\.json$/,
    use: [
      'babel-loader',
      'my-loader',
    ],
  },
],

Вместо этого я получаю эту ошибку:

ERROR in ./config.json
Module parse failed: Unexpected token ' in JSON at position 0
You may need an appropriate loader to handle this file type.
SyntaxError: Unexpected token ' in JSON at position 0
  at JSON.parse (<anonymous>)
  at JsonParser.parse (.../node_modules/webpack/lib/JsonParser.js:15:21)

Как видно из трассировки стека, он исходит от webpack/lib/JsonParser.js. Как я могу сказать Webpack, чтобы он не запускал встроенный анализатор JSON, а вместо этого делегировал обработку файлов JSON, соответствующих этому правилу, моему загрузчику?

Как насчет того, чтобы просто использовать const config = require('./config.json');?

Tan Duong 02.05.2018 08:30

Здесь цель состоит в том, чтобы import './config.json' скомпилировал JSON в исполняемый JS во время сборки, потому что в настоящее время приложение просто встраивает наш объект JSON в пакет приложения и выполняет эту работу во время выполнения. Поскольку это ресурсоемкая задача в нашем приложении, и поскольку JSON является постоянным, мы хотим скомпилировать JSON непосредственно в исполняемый код.

M Miller 02.05.2018 08:33

проверьте этот stackoverflow.com/questions/35563915/…, надеюсь, он поможет (и если он работает - пожалуйста, создайте / подтвердите ответ самостоятельно)

skyboyer 02.05.2018 08:39
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
1
3
269
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Думаю, я понял это, хотя это, похоже, недокументированная функция (по крайней мере, я не смог найти ее в документы конфигурации.

Похоже, что одно из свойств, которые вы можете передать в объекте Rule, - это type. Установив для него значение javascript/auto, вы можете переопределить парсер JSON по умолчанию и заставить его анализировать источник файла как JavaScript.

Это свойство находится в Схема JSON, используемом Webpack для проверки объекта конфигурации.

rules: [
  {
    test: /\.json$/,
    use: [
      'babel-loader',
      'my-loader',
    ],
    type: 'javascript/auto',
  },
],

Другие вопросы по теме