Webpack tip to play sound on successful compilation

When I do the web development, my IDE and the browser windows occupies almost all my screen. I hardly have any space to keep my terminals that runs the webpack compilation script in background. So I keep these terminals either minimized or hidden.

My habit is to check if the webpack compiled my changes by constantly tabbing between IDE and terminals. But this is annoying and not effective.

So here's a little trick that I added to my webpack configuration that announces the compilation is done by saying 'done', thus saving me from constant tabbing.

Create a file named webpack.announcer.plugin.js in your project.

/* webpack.announcer.plugin.js */
const exec = require('child_process').exec;
const voice = 'Agnes';
const message = 'done';
const doneSound = `say -v ${voice} "${message}"`; // MacOS.
// const doneSound = `echo ${message} | ptts`;  // windows.

function AnnouncerPlugin(options) {
   // customize.
}

AnnouncerPlugin.prototype.apply = (compiler) => {
    compiler.plugin('done', () => {
        exec(doneSound);
    });
};
module.exports = AnnouncerPlugin;

Include the above plugin in your webpack config (Eg; webpack.dev.config.js);

/* webpack.dev.config.js */
let WebpackAnnouncerPlugin = require('./webpack.announcer.plugin.js');
module.exports = {
   /*  other configuration */
   plugins: [
       new WebpackAnnouncerPlugin()
   ]
}

done!

undefined