ng build внутренне используйте webpack, чтобы сделать здание.Таким образом, эта проблема фактически разбивается на две части.
- Без
ng eject, как подключиться к внутреннему webpackConfig и настроить его в соответствии с нашими потребностями. - Как выглядит желаемый webpackConfigдля этого варианта использования.
Для части 1 есть решение @ angular-builders / custom-webpack .По сути, это позволяет вам объединить некоторое дополнительное поле с внутренним webpackConfig и по-прежнему использовать официальный "@ angular-devkit / build-angular: browser" в качестве компоновщика.
Теперь для части 2 ваш вариант использования простопроблема сборки нескольких входов и нескольких выходов в веб-пакете.Решение довольно простое.
const partialWebpackConfig = {
entry: {
'custom/comp1': '/path/to/src/lib/custom/comp1.ts',
'custom/comp2': '/path/to/src/lib/custom/comp2.ts',
},
output: {
path: path.resolve(__dirname, 'Dist'),
filename: '[name].js'
}
}
Ниже приведена пошаговая инструкция по настройке этой конфигурации.
npm install @angular-builders/custom-webpack- создайте
webpack.config.js в корне вашего проекта:
const path = require('path');
module.exports = {
entry: {
'custom/comp1': path.resolve(__dirname, 'src/lib/custom/comp1.ts'),
'custom/comp2': path.resolve(__dirname, 'src/lib/custom/comp2.ts')
},
output: {
path: path.resolve(__dirname, 'dist'),
filename: '[name].js'
}
}
редактировать поле "architect.build" в
angular.json:
{
// ...
"architect": {
"build": {
"builder": "@angular-builders/custom-webpack:browser",
"options": {
"customWebpackConfig": {
"path": "./webpack.config.js",
},
// ...
запустите
ng build, должен увидеть результат.
Для расширенного использования стоит отметить, что @angular-builders/custom-webpack поддерживает экспорт конфигурации webpack как функции для получения полного контроляокончательного использованного webpackConfig.