В Angular 13, webpack-dev-server заменен на альтернативный встроенный сервер, известный как Angular Dev Server (ng serve). Это изменение было введено для улучшения скорости разработки и обеспечения более надежного и эффективного сервера разработки.
Angular Dev Server основан на Browsersync, который предоставляет ряд возможностей, таких как перезагрузка при изменении кода, синхронизация между различными устройствами, поддержка горячей замены модулей и т.д.
Если вы хотите вернуть использование webpack-dev-server в Angular 13, необходимо внести некоторые изменения в ваш проект.
1. В файле angular.json найдите свойство "architect" -> "serve" -> "builder" и замените значение на @angular-builders/custom-webpack:dev-server.
Пример:
"architect": {
"serve": {
"builder": "@angular-builders/custom-webpack:dev-server"
}
}
2. В этом же файле добавьте свойство "customWebpackConfig" со значением пути к вашему webpack-конфигурационному файлу.
Пример:
"architect": {
"serve": {
"builder": "@angular-builders/custom-webpack:dev-server",
"options": {
"customWebpackConfig": {
"path": "./webpack.config.js"
}
}
}
}
3. Создайте файл webpack.config.js в корневой директории вашего проекта или используйте существующий файл (если он есть) и настройте его в соответствии с вашими потребностями.
Пример:
module.exports = {
// ваша настройка webpack
};
4. Запустите сервер разработки с помощью команды ng serve.
ng serve
Теперь вы восстановили использование webpack-dev-server в своем проекте Angular 13. Обратите внимание, что Angular Dev Server все равно будет доступен и можно будет использовать его для разработки. Однако, имейте в виду, что использование webpack-dev-server может быть менее эффективным и не рекомендуется для проектов Angular 13.