anybar-webpack-plugin

See the status of webpack builds in macOS menubar via Anybar.

Usage no npm install needed!

<script type="module">
  import anybarWebpackPlugin from 'https://cdn.skypack.dev/anybar-webpack-plugin';
</script>

README

anybar-webpack-plugin

See the status of webpack builds in macOS menubar via Anybar.

  • Supports multiple webpack builds.
  • Indicates whether watch is running or not.
  • Compatible with webpack 5.

Install

  1. Install Anybar.
  2. Install anybar-webpack-plugin.
$ yarn add -D anybar-webpack-plugin

Configure

const AnybarWebpackPlugin = require('anybar-webpack-plugin');

module.exports = {
  // Your webpack configuration ...
  plugins: [
    new AnybarWebpackPlugin({
      port: 1738 // default
    }),
    // etc.
  ],
};

Use

  1. Start anybar, for example, open -na AnyBar, which binds to UDP port 1738 by default.
  2. Run your webpack build.
  3. See anybar indicator update to reflect the status of the build.

For multiple webpack builds, bind AnyBar to different ports:

$ ANYBAR_TITLE=main ANYBAR_PORT=1738 open -na AnyBar
$ ANYBAR_TITLE=other ANYBAR_PORT=1739 open -na AnyBar

And specify port in each webpack build config.

Screen Shot 2021-06-25 at 19 08 14
  • Hollow = build/watch is not running
  • Yellow = build/watch is compiling
  • Green = last watch compilation succeeded; watching for changes
  • Red exclamation (not picture) = last compilation errored