Могу ли я использовать загрузчик импорта webpack, чтобы требовать файлы CSS вместе с определенными зависимостями JS? (или как неявно загрузить CSS)
Я пытаюсь преобразовать большой проект с помощью 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? Импорт-загрузчик - неподходящий инструмент для этой работы? Я чувствую, что что-то упускаю.
Спасибо!
Ответы 2
imports-loader предназначен для JavaScript. Вы хотите использовать css-loader.
Я никогда не видел такого с Webpack. Обычно я использую Sass, у которого есть собственные операторы @import для извлечения зависимостей. Возможно, у вас есть мастер-файл css, в котором перечислены все ваши импортированные файлы. В качестве альтернативы должна быть возможность явно импортировать файлы CSS в ваш JS. Но я не уверен, как сделать один оператор require / import в javascript, чтобы задействовать как CSS, так и JS.
Справедливо, может, мне нужно сделать что-то вроде этого. Мы используем импорт CSS в некоторых других местах. Меня больше всего беспокоит рефакторинг всей загрузки CSS, подобный этому, - это нарушение порядка загрузки. Это старый проект с кучей библиотечных CSS-файлов, «склеенных» таким образом, и все они применяют глобальные стили. Некоторые из них тоже загружаются лениво. У меня такое чувство, что мне будет очень сложно проверить правильность применения всех CSS, если я попытаюсь внести в него какие-либо изменения ...
Не верьте мне на слово, что то, что вы хотите, невозможно. Это просто не то, что я обычно делаю. Возможно, вам просто понадобится отдельное правило в webpack для работы с файлами .css отдельно от файлов .js. И довольно часто при работе с CSS необходимо использовать ExtractTextPlugin github.com/webpack-contrib/extract-text-webpack-plugin.
Насколько я могу судить, нет способа сделать это с помощью правил веб-пакетов, которые точно имитируют поведение RequireJS при использовании прокладки для неявного импорта. Мы использовали его в нашем старом коде для таких вещей, как плагины jQuery, например, для загрузки CSS.
Простым решением было создание промежуточного файла (например, webpack_libraryName.js), который импортирует и возвращает библиотеку, которую вы хотите использовать. Затем вы можете явно импортировать все, что хотите загрузить, в качестве побочного эффекта при импорте туда. Сопоставление этого нового файла как псевдонима старому в конфигурации Webpack означает, что вам не нужно редактировать какой-либо фактический код и вы можете запускать обе сборки одновременно.
Не могли бы вы привести пример? В текущей сборке RequireJS зависимость CSS определяется только в конфигурации оболочки оболочки. Я бы хотел, чтобы он загружался аналогичным образом с помощью Webpack всякий раз, когда требуется соответствующая библиотека JS.