Продвинутая конфигурация vue-loader
Иногда может потребоваться сделать:
Применить пользовательский загрузчик (loader) к языку, вместо обработки его с помощью
vue-loader
;Переопределить встроенные настройки загрузчиков для языков по умолчанию.
Добавить предварительную обработку или пост-обработку специфичной секции другим загрузчиком.
Чтобы сделать это укажите опцию loaders
для vue-loader
:
Опции
preLoaders
иpostLoaders
доступны только в версиях 10.3.0+
module.exports = {
// другие настройки...
module: {
// `module.rules` тоже самое, что и `module.loaders` в 1.x
rules: [
{
test: /\.vue$/,
loader: 'vue-loader',
options: {
// указанные `loaders` переопределят загрузчики используемые по умолчанию
// Конфигурация ниже будет обрабатывать все теги `<script>` без атрибута `lang`
// с помощью `coffee-loader`
loaders: {
js: 'coffee-loader'
},
// `preLoaders` будут применены перед стандартными загрузчиками.
// Вы можете использовать это для предварительной обработки секций
// часто используемая потребность для локализации на этапе сборки.
preLoaders: {
js: '/path/to/custom/loader'
},
// `postLoaders` будут применены после стандартных загрузчиков.
//
// - Для `html`, результат возвращаемый стандартным загрузчиком
// будет скомпилированный в JavaScript код render-функции.
//
// - Для `css`, результат возвращаемый из `vue-style-loader`
// что не является особенно полезным в большинстве случаев.
// Использование postcss-плагина будет лучшим вариантом.
postLoaders: {
html: 'babel-loader'
},
// `excludedPreLoaders` должен быть регулярным выражением
excludedPreLoaders: /(eslint-loader)/
}
}
]
}
}
Примером использования продвинутой конфигурации может быть например извлечение CSS из компонентов в отдельный файл.