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

Chat with the Author

This post was written by Veera, a software developer by profession and a maker by passion.

You will be taken to twitter.com where you can edit the tweet before posting.

If you liked my writing, you may like my products