8.6. Кастомизация

Прогресс-бар для webpack

Ссылка на плагин

Плагин меняет внешний вид прогресса компиляции кода во время разработки. Устанавливается так: npm install webpackbar -D

Также его можно не настраивать, а просто подключить:

const webpack = require('webpack');
const WebpackBar = require('webpackbar');

module.exports = {
  context: path.resolve(__dirname),
  devtool: 'source-map',
  entry: './entry.js',
  output: {
    filename: './output.js',
    path: path.resolve(__dirname)
  },
  plugins: [
    new WebpackBar() // Принимает объект с полями для кастомизации. Почитать о них можно, перейдя по ссылке на плагин
  ]
};

Кастомизация вывода ошибок в консоль

Ссылка на плагин

Плагин меняет внешний вид ошибок компиляции кода во время разработки. Устанавливается следующим образом:

npm install @soda/friendly-errors-webpack-plugin -D

Пример настройки плагина:

const FriendlyErrorsWebpackPlugin = require('@soda/friendly-errors-webpack-plugin');

module.exports = {
  // ...
  plugins: [
    new FriendlyErrorsWebpackPlugin(),
  ],
  // ...
}

Уведомления рабочего стола на Node.js

Ссылка на плагин

Плагин добавляет уведомления рабочего стола во время ведения разработки. Работает на OS Windows и Linux.

Устанавливается так:

npm install --save node-notifier

У плагина множество настроек. Поэтому, если вы его используете, стоит выносить код в отдельный файл.

Пример базовой настройки.

const notifier = require('node-notifier');

notifier.notify({
  title: 'My notification',
  message: 'Hello, there!',
  sound: true,
  wait: true
  // также можно добавить свои иконки или что-то ещё
});

Автоматическое удаление неиспользуемого CSS-кода

Ссылка на плагин

Установка:

npm i purgecss-webpack-plugin -D

Лучше использовать при сборке проекта (разделённом конфиге), код которого может выглядеть так:

const path = require('path');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');
const PurgeCSSPlugin = require('purgecss-webpack-plugin');
const glob = require('glob');

module.exports = {
  mode: 'production',
  devtool: 'source-map',
  plugins: [
    new MiniCssExtractPlugin({
      filename: 'css/[name]_[contenthash:8].css',
      chunkFilename: 'css/[name]_[contenthash:8].css',
    }),
    new PurgeCSSPlugin({
      paths: glob.sync(`${path.join(__dirname, '../src')}/**/*`, {nodir: true}),
    }),
  ],
}

Для оптимальной работы может понадобиться дополнительный пакет — glob, который был использован в примере.