Могу ли я использовать импорт веб-пакетов для загрузки файлов CSS вместе с определенными зависимостями JS?(или, как неявно загрузить CSS)

Question

Я пытаюсь преобразовать большой проект, используя RequireJS, в Webpack 4. Конечная цель - это возможность использовать оба инструмента бок о бок, по крайней мере для разработки, с минимальными изменениями в необходимом коде.

У меня проблема с преобразованием записей подкладки в моем файле конфигурации RequireJS в их эквиваленты в Webpack, когда задействован CSS. Например, вот как выглядит запись конфигурации RequireJS:

shim: {
  jsDependency: {
    deps: ["otherJsDependency", "css!cssDependency"]
  }
}

В Webpack рекомендуется использовать способ импорта с помощью import-loader, поэтому вот что я пробовал там (внутри массива module.rules):

{
  test: /jsDependency/,
  use: ['imports-loader?otherJsDependency,cssDependency']
}

JS, кажется, разрешается нормально. Я не могу заставить CSS загружаться таким образом. Другие CSS-файлы, которые явно импортированы вместе с самими зависимостями, загружаются нормально.

Полагаю, я могу создать файл-обертку, который явно требует CSS и исходной зависимости. Это было бы немного больно, но не слишком много работы. У нас есть много этих записей в нашей конфигурации RequireJS.

Однако ... неужели нет способа неявно подобрать / загрузить CSS с помощью Webpack? Является ли import-loader подходящим инструментом для этой работы? Я чувствую, что, должно быть, что-то упустил.

Спасибо!

Answer 1

Насколько я могу судить, не существует способа сделать это с помощью правил веб-пакета, которые точно имитируют поведение RequireJS при использовании shim для неявного импорта. Мы использовали его во многих наших старых кодах для таких вещей, как плагины jQuery, например, для загрузки CSS.

Простым решением было создание промежуточного файла (то есть: webpack_libraryName.js), который импортирует и возвращает библиотеку, которую вы хотите использовать. Затем вы можете явно импортировать все, что хотите загрузить, в качестве побочного эффекта при его импорте туда. Отображение этого нового файла в качестве псевдонима к старому в конфигурации Webpack означает, что вам не нужно редактировать какой-либо реальный код и вы можете запускать обе сборки одновременно.

Answer 2

imports-loader для JavaScript.Вы хотите использовать css-loader.