webpack-notifier

What is webpack-notifier?

The webpack-notifier package is a plugin for Webpack that displays build status system notifications to inform developers about the success or failure of their builds. It helps in providing immediate feedback without needing to check the terminal.

What are webpack-notifier's main functionalities?

Basic Notification

This feature allows you to set up basic notifications for your Webpack builds. When the build process completes, a notification will appear indicating whether the build was successful or if there were errors.

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

module.exports = {
  // other webpack configuration settings
  plugins: [
    new WebpackNotifierPlugin()
  ]
};

Custom Notification Title

This feature allows you to customize the title of the notification. This can be useful if you are working on multiple projects and want to easily identify which project the notification is for.

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

module.exports = {
  // other webpack configuration settings
  plugins: [
    new WebpackNotifierPlugin({ title: 'My Project' })
  ]
};

Exclude Warnings

This feature allows you to exclude warnings from the notifications. This can be useful if you only want to be notified about errors and not warnings.

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

module.exports = {
  // other webpack configuration settings
  plugins: [
    new WebpackNotifierPlugin({ excludeWarnings: true })
  ]
};

Always Notify

This feature ensures that you always receive a notification, even if the build is successful. This can be useful if you want to be notified every time a build completes, regardless of the outcome.

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

module.exports = {
  // other webpack configuration settings
  plugins: [
    new WebpackNotifierPlugin({ alwaysNotify: true })
  ]
};

Other packages similar to webpack-notifier

node-notifier

Node Notifier is a Node.js module for sending cross-platform notifications. It can be used with Webpack through custom plugins or scripts. Unlike webpack-notifier, it is not specifically designed for Webpack but offers more flexibility for various notification use cases.

webpack-build-notifier

Webpack Build Notifier is another Webpack plugin that provides build status system notifications. It offers similar functionality to webpack-notifier but includes additional features like custom icons and sound notifications.

friendly-errors-webpack-plugin

Friendly Errors Webpack Plugin is designed to improve the readability of Webpack build errors and warnings. It also provides notifications, but its primary focus is on making the terminal output more user-friendly.

README

webpack-notifier

This is a webpack plugin that uses the node-notifier package to display build status system notifications to the user.

This is a fork of the webpack-error-notification plugin. It adds support for Windows and there is no need to manually install the terminal-notifier package on OS X anymore.

The plugin will notify you about the first run (success/fail), all failed runs and the first successful run after recovering from a build failure. In other words: it will stay silent if everything is fine with your build.

Installation

Use npm to install this package:

npm install --save-dev webpack-notifier

Check the node-notifier Requirements whether you need to install any additional tools for your OS.

Usage

In the webpack.config.js file:

var WebpackNotifierPlugin = require('webpack-notifier');

var config = module.exports = {
  // ...

  plugins: [
    new WebpackNotifierPlugin(),
  ]
}

Configuration

Title

Title shown in the notification.

new WebpackNotifierPlugin({title: 'Webpack'});

new WebpackNotifierPlugin({title: function (params) {
  return `Build status is ${params.status} with message ${params.message}`;
}});

Emojis in message text

Show status emoji icon before the message.

new WebpackNotifierPlugin({emoji: true});

Content Image

Image shown in the notification. Can be a path string or object with paths.

String path:

var path = require('path');

new WebpackNotifierPlugin({contentImage: path.join(__dirname, 'logo.png')});

Object string path:

var path = require('path');

const statusesPaths = {
  success: path.join(__dirname, 'success.png'),
  warning: path.join(__dirname, 'warning.png'),
  error: path.join(__dirname, 'error.png')
}

new WebpackNotifierPlugin({contentImage: statusesPaths});

Exclude Warnings

If set to true, warnings will not cause a notification.

new WebpackNotifierPlugin({excludeWarnings: true});

Always Notify

Trigger a notification every time. Call it "noisy-mode".

new WebpackNotifierPlugin({alwaysNotify: true});

Notify on error

Trigger a notification only on error.

new WebpackNotifierPlugin({onlyOnError: true});

Skip Notification on the First Build

Do not notify on the first build. This allows you to receive notifications on subsequent incremental builds without being notified on the initial build.

new WebpackNotifierPlugin({skipFirstNotification: true});