Модификация Webpack конфигурации

Quasar Framework использует под капотом Webpack для сборки приложений. Управление конфигурацией Webpack позволяет гибко настраивать процесс сборки, оптимизировать производительность, подключать дополнительные плагины и лоадеры, а также интегрировать нестандартные решения. В Quasar это реализовано через конфигурационный файл quasar.config.js с секцией build.

Основы изменения конфигурации

В файле quasar.config.js секция build содержит ключ extendWebpack или chainWebpack:

// quasar.config.js
module.exports = {
  build: {
    extendWebpack(cfg) {
      // cfg — это объект конфигурации Webpack
      // можно модифицировать существующие правила или добавить новые
    }
  }
}
  • extendWebpack принимает функцию с объектом конфигурации Webpack. Любые изменения должны производиться напрямую с этим объектом.
  • chainWebpack предоставляет API webpack-chain, позволяющее работать через цепочку вызовов для более структурированных изменений.

Добавление новых лоадеров

Для добавления нового лоадера используется правило cfg.module.rules.push. Например, для поддержки загрузки CSV-файлов:

extendWebpack(cfg) {
  cfg.module.rules.push({
    test: /\.csv$/,
    use: ['csv-loader']
  });
}

Важно указывать точные условия (test) и последовательность лоадеров (use). Webpack обрабатывает файлы строго по порядку.

Настройка существующих правил

Quasar уже включает стандартные правила для обработки CSS, Vue-файлов, изображений и т.д. Их можно изменить:

extendWebpack(cfg) {
  const vueRule = cfg.module.rules.find(r => r.test.test('.vue'));
  if (vueRule) {
    vueRule.options.compilerOptions = {
      ...vueRule.options.compilerOptions,
      whitespace: 'preserve'
    };
  }
}

Таким образом можно изменять параметры vue-loader, babel-loader и других встроенных компонентов сборки.

Добавление плагинов

Webpack плагины расширяют функциональность сборки. В Quasar их подключение происходит через массив cfg.plugins:

const webpack = require('webpack');

extendWebpack(cfg) {
  cfg.plugins.push(
    new webpack.ProvidePlugin({
      _: 'lodash'
    })
  );
}

ProvidePlugin автоматически подключает библиотеки (например, lodash) без необходимости импорта в каждом модуле. Аналогично можно подключать плагины для оптимизации CSS, минификации JS или анализа бандла.

Настройка alias

Для удобства импорта модулей можно задать алиасы:

extendWebpack(cfg) {
  cfg.resolve.alias = {
    ...cfg.resolve.alias,
    '@components': path.resolve(__dirname, 'src/components'),
    '@utils': path.resolve(__dirname, 'src/utils')
  };
}

Алиасы позволяют писать короткие пути при импортах:

import MyComponent fr om '@components/MyComponent.vue';

Разделение кода и оптимизация

Quasar поддерживает настройки optimization.splitChunks, которые позволяют управлять разделением кода на чанки:

extendWebpack(cfg) {
  cfg.optimization.splitChunks = {
    chunks: 'all',
    cacheGroups: {
      vendors: {
        test: /[\\/]node_modules[\\/]/,
        name: 'vendor',
        chunks: 'all'
      }
    }
  };
}

Это улучшает кэширование и время загрузки, позволяя повторно использовать общие зависимости между страницами.

Работа с environment variables

Quasar позволяет использовать переменные окружения через Webpack DefinePlugin:

const webpack = require('webpack');

extendWebpack(cfg) {
  cfg.plugins.push(
    new webpack.DefinePlugin({
      'process.env.API_URL': JSON.stringify(process.env.API_URL || 'https://api.example.com')
    })
  );
}

Это позволяет создавать конфигурации для development, staging и production без изменения исходного кода.

Настройка Source Maps

Source Maps позволяют отлаживать код, сгенерированный Webpack. В Quasar можно включить их через конфигурацию:

build: {
  sourcemap: true,
  extendWebpack(cfg) {
    cfg.devtool = 'source-map';
  }
}

Поддерживаются разные режимы: cheap-module-source-map, eval-source-map, hidden-source-map, в зависимости от требований к производительности и безопасности.

Интеграция сторонних библиотек

Некоторые библиотеки требуют специфических настроек Webpack. Например, подключение Three.js с настройкой raw-loader для текстур:

extendWebpack(cfg) {
  cfg.module.rules.push({
    test: /\.(glb|gltf)$/,
    use: ['file-loader']
  });
}

Также часто требуется добавление fallback для Node.js модулей в браузере:

cfg.resolve.fallback = {
  fs: false,
  path: require.resolve('path-browserify')
};

Использование chainWebpack

API chainWebpack позволяет изменять конфигурацию без прямого вмешательства в объект. Например, изменить правило для изображений:

chainWebpack(chain) {
  chain.module
    .rule('images')
    .test(/\.(png|jpe?g|gif|webp)$/)
    .use('url-loader')
    .loader('url-loader')
    .options({ lim it: 8192 });
}

Преимущество chainWebpack в том, что он сохраняет порядок правил, автоматически интегрируясь с Quasar.

Полезные советы

  • Всегда проверять итоговую конфигурацию через quasar info и quasar inspect.
  • Для сложных проектов использовать комбинацию extendWebpack + chainWebpack для максимальной гибкости.
  • Сохранять стандартные правила Quasar при модификации, чтобы избежать конфликтов с Vue, CSS и PostCSS.
  • Использовать плагины Webpack только по необходимости, чтобы не увеличивать размер бандла.
Оглавление