Ювелирная настройка Webpack в Angular приложении

Angular CLI - это ценный инструмент, который использует каждый разработчик Angular для инициализации, разработки, создания и поддержки своих приложений с легкостью. С выпуском Angular 8 был добавлен API Architect который дает возможность легко встроиться в конфигурацию webpack.

Настройка конфигурации webpack

Расширим конфигурацию webpack, добавив несколько доработок:

1. плагин webpack-notifier, который использует пакет node-notifier для отображения уведомлений о состоянии сборки в системе для пользователя.

2. postcss

Создадим новое приложение Angular:

npx @angular/cli new appName

Далее установим библиотеку angular-builders

npm i -D @angular-builders/custom-webpack

Изменим файл angular.json, в частности опцию builder в полях architect.build и architect.serve на следующее:

{
  "architect": {
    "build": {
      "builder": "@angular-builders/custom-webpack:browser",
      "options": {
        "customWebpackConfig": {
          "path": "./webpack.config.js"
        }
      }
    },
    "serve": {
      "builder": "@angular-builders/custom-webpack:dev-server",
      "options": {
        "customWebpackConfig": {
          "path": "./webpack.config.js"
        }
      }
    }
  }
}

С этим изменением, когда мы запускаем команды ng serve или ng build, Angular будет использовать наш пользовательский сборщик. Сборщик выполнит ту же сборку, что и стандартный, с дополнительными параметрами, указанными в предоставленной конфигурации файла webpack.

Изучим содержимое файла webpack.config:

const WebpackNotifierPlugin = require('webpack-notifier');
const path = require('path');

module.exports = {
  module : {
    rules: [
      {
        test   : /\.scss$/,
        loader : 'postcss-loader',
        options: {
          ident  : 'postcss',
          plugins: () => [
            require('postcss-short')(),
          ]
        }
      }
    ]
  },
  plugins: [
    new WebpackNotifierPlugin({
      alwaysNotify: true,
      title       : 'App Name',
      contentImage: path.join(__dirname, 'image.png')
    }),
  ]
};

Достаточно создать объект конфигурации webpack с дополнительными настройками, которые требуются. В нашем случае используется API webpack для добавления загрузчика postcss, чтобы была возможность применить плагин плагин postcss-short и плагин WebpackNotifierPlugin, о котором мы упоминали ранее.

Сборщик позаботится о слиянии дельты с существующей конфигурацией, предоставленной Angular.

Теперь мы можем использовать API плагина postcss-short, например, давайте добавим сокращенное свойство size:

div {
  size: 300px;
}

Запустим пример

В итоге появилось уведомление и готовый CSS.

Это вольный перевод материала