Run command after webpack build

Question

I'd like to run webpack in --watch mode, and run a shell command after each build that synchronizes a folder to another one.

I found this plugin that triggers an event after each build. That works, but the last piece of the puzzle is to trigger a shell command (for syncing) from Javascript. Any pointers on how to achieve this are greatly appreciated.

Answer 1

Webpack 4

As of today (April 11, 2018), most of the plugins I've tried use the deprecated API resulting in this warning:

DeprecationWarning: Tapable.plugin is deprecated. Use new API on `.hooks` instead 

It pleased me to find that you can easily write an ad-hoc webpack plugin (docs).

In your webpack.config.js file:

const exec = require('child_process').exec;  module.exports = {    // ... other config here ...    plugins: [      // ... other plugins here ...      {       apply: (compiler) => {         compiler.hooks.afterEmit.tap('AfterEmitPlugin', (compilation) => {           exec('<path to your post-build script here>', (err, stdout, stderr) => {             if (stdout) process.stdout.write(stdout);             if (stderr) process.stderr.write(stderr);           });         });       }     }   ] }; 

If you'd rather use spawn to get real-time or "live" data from your script, this illustrates the basic usage:

const spawn = require('child_process').spawn;  const child = spawn('<your script here>'); child.stdout.on('data', function (data) {     process.stdout.write(data); }); child.stderr.on('data', function (data) {     process.stderr.write(data); });