Использование require.resolve в конфигурации webpack приводит к ошибке времени выполнения: «Предоставленное значение» ... «не является абсолютным путем!»

Question

Я пытаюсь использовать exports-loader с моей конфигурацией веб-пакета, но у меня возникает проблема при попытке его настроить.

webpack.config.js

module.exports = {
    module: {
        rules: [
            {
                test: require.resolve('./src/globals.js'),
                use: 'exports-loader?file,parse=helpers.parse'
            }
        ]
    }
};

. / SRC / globals.js

var file = 'blah.txt'
var helpers = {
    test: function() { console.log('test something'); },
    parse: function() { console.log('parse something'); }
}

. / SRC / index.js

import { file } from './globals.js'
console.log('the file', file);

Мое приложение работает нормально, но когда я пытаюсь его запустить, я получаю:

WebpackOptionsValidationError: Неверный объект конфигурации. Webpack был инициализирован с использованием объекта конфигурации, который не соответствует схеме API.

• configuration.module.rules [0] .test должен быть одним из следующих:
  • configuration.module.rules [0] .test: Предоставленное значение "./src/globals.js" не является абсолютным путем!

Для полной ясности я понимаю разницу между абсолютным и относительным путем, и я знаю, что значение, которое я использую, является относительным путем. Моя путаница двоякая:

1. require.resolve разрешает относительные пути, так почему я не могу использовать его здесь
2. Если я не могу использовать относительный путь, как я могу ссылаться на этот файл в противном случае?

Я попытался использовать абсолютный путь для свойства test, например:

test: require.resolve(path.join(__dirname, 'src/globals.js'))

Но я получаю эту ошибку при попытке запустить:

Ошибка: не удается найти модуль /workspace/my-app/dist/src/globals.js

Так что я застрял. Как правильно настроить этот загрузчик для соответствующей ссылки на этот файл?

Answer 1

Получение exports-loader на работу

Экспортный загрузчик - это загрузчик веб-пакетов, который позволяет динамически добавлять exports предложения к загруженным им файлам JavaScript. Например, ваш файл globals.js не содержит export, только переменные file и helpers, но с exports-loader он может работать , как если бы имел export статьи.

Загрузка вебпакеров

По сути, чтобы использовать загрузчик, мы должны предоставить предложения test и use. test может быть регулярным выражением, массивом или объектом, и в основном он решает, какие файлы будут использовать определенные загрузчики.

Предложение use определяет, какие загрузчики будут применены к файлам, которые соответствуют регулярному выражению test.

В этом случае нам следует, например, указать веб-пакету загрузить globals.js с exports-loader:

  module: {
    rules: [
      {
        test: /globals.js/,
        use: 'exports-loader',
      }
    ]
  }

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

Как только мы сделаем это, когда webpack найдет файл require или import против файла globals.js, он будет использовать exports-loader.

С другой стороны, exports-loader работает, изменяя вызовы require, чтобы указать ему, как извлечь переменные из необходимого файла. Как в их документах:

file.js

const file = 'foo';

app.js

const file = require('exports-loader?file!./file.js');
console.log(file); // foo

Итак, в основном вам нужно две вещи, чтобы exports-loader заработал:

1. Используйте require или import со специальным синтаксисом.

2. Загрузите загрузчик в webpack.config.js как обычно (они пропускают это в своей документации).

Вместо этого вы пытаетесь использовать этот конкретный синтаксис exports-loader в своем файле webpack.config.js, а затем используете его с import.

Итак, плохие новости заключаются в том, что exports-loader требуется специальное форматирование в каждом операторе require или import для выполнения magic . Вы просто не можете указать это в своем конфигурационном файле при попытке (или, по крайней мере, я не знаю как).

Итак, чтобы заставить его работать, вам нужно:

• Исправьте ваш webpack.config.js, как указано выше.
• измените файл index.js, чтобы он использовал exports-loader magic :

import file from 'exports-loader?file!./deps.js'
console.log('the file', file);