Из документов:

Цепочки загрузчиков составлены в хронологическом порядке. Первый загрузчик в цепочке загрузчиков возвращает значение следующему.

Возьмем, к примеру, следующую конфигурацию веб-пакета.

  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          { loader: 'style-loader'},
          { loader: 'css-loader'}
        ]
      }
    ]
  }

Согласно документам, сначала запускается style-loader, а затем направляет свой вывод в css-loader (из-за хронологического порядка). Но это не так. На самом деле css-loader сначала загружает таблицы стилей, а затем передает результат в style-loader, который затем добавляет их на страницу html.

Если я изменю порядок загрузчиков, я получаю ошибку при сборке:

 { loader: 'css-loader'},
 { loader: 'style-loader'}

Ошибка:

ERROR in ./src/style.css
Module build failed: Unknown word (5:1)

  3 | // load the styles
  4 | var content = require("!!./style.css");
> 5 | if(typeof content === 'string') content = [[module.id, content, '']];
    | ^
  6 | // Prepare cssTransformation
  7 | var transform;
  8 | 

 @ ./src/index.js 1:14-36

Что мне не хватает? Я неправильно понимаю хронологический порядок?

0
manidos 30 Дек 2017 в 13:58

1 ответ

Лучший ответ

Вот разные документы

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

Теперь это имеет смысл

1
manidos 30 Дек 2017 в 12:59