webpack-build-notifier

webpack-build-notifier

A Webpack plugin that uses the node-notifier module to display OS-level notifications for Webpack build errors and warnings.

Are you tired of having to constantly switch between your IDE and terminal window to see whether your latest edits resulted in a failed build? Why didn't your latest changes get hot-loaded? Was there a syntax error or failed unit test? With this plugin, you will always be apprised of build problems without having to keep an eye on your terminal window.

To use, install the webpack-build-notifier package npm install webpack-build-notifier --save-dev and add the plugin to your Webpack configuration file:

// webpack.config.js
var WebpackBuildNotifierPlugin = require('webpack-build-notifier');

module.exports = {
  // ... snip ...
  plugins: [
    new WebpackBuildNotifierPlugin({
      title: "My Project Webpack Build",
      logo: path.resolve("./img/favicon.png"),
      suppressSuccess: true
    })
  ],
  // ... snip ...
}

Config Options

title

The notification title. Defaults to Webpack Build.

logo

The absolute path to the project logo to be displayed as a content image in the notification. Optional.

sound

The sound to play for notifications. Set to false to play no sound. Valid sounds are listedin the node-notifier project, here. Defaults to Submarine.

successSound

The sound to play for success notifications. Defaults to the value of the sound configuration option. Set to false to play no sound for success notifications. Takes precedence over the sound configuration option.

warningSound

The sound to play for warning notifications. Defaults to the value of the sound configuration option. Set to false to play no sound for warning notifications. Takes precedence over the sound configuration option.

failureSound

The sound to play for failure notifications. Defaults to the value of the sound configuration option. Set to false to play no sound for failure notifications. Takes precedence over the sound configuration option.

suppressSuccess

Defines when success notifications are shown. Can be one of the following values:

• false - Show success notification for each successful compilation (default).
• true - Only show success notification for initial successful compilation and after failed compilations.
• "always" - Never show the success notifications.
• "initial" - Same as true, but suppresses the initial success notification.

suppressWarning

True to suppress the warning notifications, otherwise false (default).

suppressCompileStart

True to suppress the compilation started notifications (default), otherwise false.

activateTerminalOnError

True to activate (focus) the terminal window when a compilation error occurs. Note that this only works on Mac OSX (for now). Defaults to false. Regardless of the value of this config option, the terminal window can always be brought to the front by clicking on the notification.

successIcon

The absolute path to the icon to be displayed for success notifications. Defaults to the included ./icons/success.png.

warningIcon

The absolute path to the icon to be displayed for warning notifications. Defaults to the included ./icons/warning.png.

failureIcon

The absolute path to the icon to be displayed for failure notifications. Defaults to the included ./icons/failure.png.

compileIcon

The absolute path to the icon to be displayed for compilation started notifications. Defaults to the included ./icons/compile.png.

messageFormatter

A function which returns a formatted notification message. The function is passed two parameters:

• {Object} error/warning - The raw error or warning object.
• {String} filepath - The path to the file containing the error/warning (if available).

onClick

A function called when the notification is clicked. By default it activates the Terminal application.

Future Improvements

• TBD

Notes

After publishing this package I discovered a couple other similar plugins that are worth looking into:

• webpack-notifier
• webpack-error-notification

Given the purpose and similarities, this project probably should have been a fork of one of these.

Changelog

0.1.17

November 6, 2017

• Added notification hook for webpack "watch-run" compilation event to show notifications when the compilation process has started. Added suppressCompileStart and compileIcon configuration options to support this. This notification will not be shown by default; set suppressCompileStart to false to enable.

0.1.16

July 25, 2017

• Updated suppressSuccess configuration option to support "always" and "initial" values.

0.1.15

July 17, 2017

• Updated webpack icons.

0.1.14

June 14, 2017

• Added warningSound configuration option.

0.1.13

October 19, 2016

• Added messageFormatter configuration option to allow custom formatting of notification message.

0.1.12

July 25, 2016

• Bugfix for #6, more null checking.

0.1.11

July 16, 2016

• Bugfix for #6; added null check for error messages.

0.1.10

July 14, 2016

• Added reference to strip-ansi NPM package to remove CLI color formatting from notifications.

0.1.9

July 5, 2016

• Added new onClick configuration option to allow for specifying of notification click behavior.

0.1.8

February 17, 2016

• Added new successSound and failureSound configuration options to allow different sounds depending upon the notification type. The sound configuration is still supported, but these two new options will take precedence.

0.1.7

January 18, 2016

• Fixed sound configuration option to allow "false" value to disable sound.

0.1.6

December 17, 2015

• Added suppressWarning configuration option.

Changelog

0.1.17

November 6, 2017

• Added notification hook for webpack "watch-run" compilation event to show notifications when the compilation process has started. Added suppressCompileStart and compileIcon configuration options to support this. This notification will not be shown by default; set suppressCompileStart to false to enable.