advanced.md

Продвинутая конфигурация vue-loader

Иногда может потребоваться сделать:

1. Применить пользовательский загрузчик (loader) к языку, вместо обработки его с помощью vue-loader;

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

3. Добавить предварительную обработку или пост-обработку специфичной секции другим загрузчиком.

Чтобы сделать это укажите опцию loaders для vue-loader:

Опции preLoaders и postLoaders доступны только в версиях 10.3.0+

Webpack 2.x

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)/
        }
      }
    ]
  }
}

Webpack 1.x

// webpack.config.js
module.exports = {
  // другие настройки...
  module: {
    loaders: [
      {
        test: /\.vue$/,
        loader: 'vue'
      }
    ]
  },
  // настройки vue-loader
  vue: {
    loaders: {
      // такая же конфигурация правил как и выше
    }
  }
}

Примером использования продвинутой конфигурации может быть например извлечение CSS из компонентов в отдельный файл.