Run command after webpack build

by

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);
});

More Related Contents:

  1. styled components final styles are injected directly in DOM with tag, with style tag injection does performance gets affected?
  2. Managing jQuery plugin dependency in webpack
  3. Define global variable with webpack
  4. How to copy static files to build directory with Webpack?
  5. What does the @ mean inside an import path?
  6. Expose jQuery to real Window object with Webpack
  7. ES6 exporting/importing in index file
  8. How to load all files in a directory using webpack without require statements
  9. webpack dynamic module loader by require
  10. ES6 modules implementation, how to load a json file
  11. Load new modules dynamically in run-time with Angular CLI & Angular 5
  12. Angular 2 – communication of typescript functions with external js libraries
  13. When should I use brackets with imports
  14. How to store Configuration file and read it using React
  15. Arrow Function syntax not working with webpack?
  16. Webpack file-loader outputs [object Module]
  17. Webpack babel 6 ES6 decorators
  18. How to build minified and uncompressed bundle with webpack?
  19. webpack require every file in directory
  20. javascript import from ‘/folder’ with index.js
  21. Webpack bundles my files in the wrong order (CommonsChunkPlugin)
  22. Webpack output is empty object
  23. Webpack and external libraries
  24. Webpack breaking change
  25. “You may need an additional loader to handle the result of these loaders.”
  26. Electron IPC and nodeIntegration
  27. Conflict: Multiple assets emit to the same filename
  28. How can I use webpack with express?
  29. Rails 5/6: How to include JS functions with webpacker?
  30. Solution: load independently compiled Webpack 2 bundles dynamically [closed]

Leave a Comment