Vue CLI формирует поверх Webpack абстракцию конфигурации, скрывая большую часть низкоуровневых деталей сборки за предустановленными шаблонами. Основная точка расширения этой системы — файл vue.config.js, через который осуществляется контроль над внутренним webpack-конфигом без необходимости полного eject-подхода.
Vue CLI не заменяет Webpack, а создает слой управления над ним. Внутри каждого проекта сохраняется полноценная webpack-сборка, включающая entry, output, loaders, plugins, optimization и devServer. Разница заключается в том, что базовая конфигурация генерируется автоматически, а пользовательская логика добавляется декларативно.
Конфигурация сборки в Vue CLI делится на несколько уровней:
Базовый слой включает типовые настройки:
vue.config.js выступает как интерфейс к этим слоям.
Файл vue.config.js экспортирует объект конфигурации или функцию, возвращающую объект. Он выполняет роль центрального файла управления поведением сборки.
Основные поля конфигурации:
Каждое из этих свойств влияет на отдельный аспект сборки Webpack.
publicPath управляет базовым URL для всех ассетов. В Webpack это аналог publicPath в output:
outputDir определяет каталог, в который Webpack складывает результат сборки. По умолчанию это dist.
assetsDir задает вложенную структуру для статических ресурсов внутри outputDir. Это влияет на организацию файлов после работы file-loader и url-loader.
filenameHashing включает или отключает добавление hash в имена файлов. В Webpack это связано с contenthash, используемым для кэширования.
configureWebpack позволяет модифицировать итоговый webpack-конфиг напрямую. Поддерживается два режима:
Пример логики:
В терминах Webpack это эквивалент глубокого merge с исходной конфигурацией.
Важно учитывать, что configureWebpack не всегда подходит для сложных модификаций, так как не дает точного контроля над порядком loader-ов и структурой rules.
chainWebpack предоставляет более низкоуровневый доступ к конфигурации через библиотеку webpack-chain. В отличие от прямого объекта, здесь используется цепочный API, позволяющий точно управлять порядком и структурой правил Webpack.
Основные возможности:
Пример логики работы:
Webpack-chain особенно важен при работе с vue-loader, babel-loader и style-loader, где порядок выполнения влияет на результат.
devServer в vue.config.js управляет webpack-dev-server, который отвечает за локальную разработку.
Ключевые параметры:
proxy является критически важной частью при разработке фронтенда с отдельным backend API. Он позволяет перенаправлять запросы без CORS-проблем.
Пример логики proxy:
Это реализуется через http-proxy-middleware внутри Webpack dev server.
Alias в Vue CLI позволяет управлять Webpack resolve.alias без прямого редактирования конфигурации.
Часто используемые алиасы:
В Webpack это влияет на механизм module resolution, позволяя упростить импорт:
Также можно расширять resolve.extensions, добавляя автоматическое разрешение .ts, .tsx, .mjs.
Vue CLI интегрирует Webpack loaders для работы с CSS:
Через секцию css в vue.config.js можно управлять поведением:
loaderOptions позволяет, например, конфигурировать Sass:
Vue CLI уже включает набор стандартных плагинов Webpack:
Через configureWebpack или chainWebpack можно добавлять новые плагины:
В Webpack плагинная система работает через lifecycle hooks компиляции, такие как compilation, emit, done.
Webpack в Vue CLI использует встроенные механизмы оптимизации:
splitChunks особенно важен:
В production режиме Webpack автоматически активирует оптимизации, включая dead code elimination.
Vue CLI интегрирует dotenv и Webpack DefinePlugin.
Переменные окружения:
Все переменные, начинающиеся с VUE_APP_, становятся доступными в коде через process.env.
Webpack подставляет их на этапе сборки, заменяя значения статически.
Через chainWebpack можно добавлять новые правила обработки файлов:
Webpack rules определяют:
Пример логики:
Vue CLI позволяет условно изменять Webpack-конфигурацию в зависимости от NODE_ENV.
Подход:
В vue.config.js можно использовать функцию:
Vue CLI генерирует Webpack конфигурацию через цепочку функций:
После этого итоговый объект передается в Webpack compiler.
Webpack далее выполняет: