title: Webpack plugin error management
body: <p>The main goal of this post is to get extra informations about error/warning management while writing a Webpack plugin.</p>
  
  <p>I've seen in the <a href="https://webpack.github.io/docs/plugins.html" rel="noreferrer">Webpack plug-in documentation</a> that it's possible to pass an <code>err</code> parameter to the timing based plug-in interface (in the callback), but there is no further explanations on how it's impacting Webpack life-cycle, its  build process and how to use it. It doesn't explain either if there is a way to manage errors with the other type of plug-in interface.</p>
  
  <p>Anyway as a first try, on a <code>'emit'</code> life-cycle step, I've tried to either pass to the <code>err</code> parameter a <code>new Error('An error has occurred')</code> or simply a <code>'An error has occured'</code> value, but in either cases it indeed displayed the given err parameter in the console as is (I.E. sadly without any error specific colouration), and webpack-sev-server got stuck :</p>
  
  <pre><code>  function WpAggregationPlugin() {
      this.startTime = Date.now();
      this.prevTimestamps = {};
    }
  
    WpAggregationPlugin.prototype.apply = function(compiler) {
      compiler.plugin( 'emit', (compilation, callback) =&gt; {
  
        var changedFiles = Object.keys(compilation.fileTimestamps).filter( watchfile =&gt; 
          this.prevTimestamps[watchfile] &amp;&amp;
          (this.prevTimestamps[watchfile] &lt; (compilation.fileTimestamps[watchfile] || Infinity)) )
  
        // compilation.errors.push(new Error('...'))
  
        this.prevTimestamps = compilation.fileTimestamps;
  
        if( changedFiles.length &lt;= 0 ) {
          callback()
        } else {
          process.stdout.write( `File modification detected :\n${JSON.stringify(changedFiles, null, 4)}\n` )
          callback( '...' )
        }
      } );
    };
  
    module.exports = WpAggregationPlugin;
  </code></pre>
  
  <p>So it needed an extra callback call the following way in order to have Webpack build process resumed :</p>
  
  <pre><code>  ...
        if( changedFiles.length &lt;= 0 ) {
          callback()
        } else {
          process.stdout.write( `File modification detected :\n${JSON.stringify(changedFiles, null, 4)}\n` )
          callback( '...' )
          callback()       // EXTRA CALL
        }
    ...
  </code></pre>
  
  <p>Unfortunately, this way, I simply end-up displaying uncoloured strings to stdout without impacting Webpack life-cycle in any way.</p>
  
  <p>What I'm trying to achieve is, upon my error cases, to display red error messages and to prevent the bundle build process to end in a <code>valid</code> state until a new build eventually have my plug-in running without errors.</p>
  
  <p>About warning management I guess it has to be performed either by calling <code>process.stdout.write()</code> with the right colouring directly within the plug-in itself or, feeding some warning collection in the compilation parameter ... but alike what I've reported so far in this SO question ... it's only guessing :p</p>
  
  <p>For the record, I ask this question because I've written a tiny build tool whose goal is to aggregate in one file all translations scattered around in an applications. It's in order to have our clients dealing with a single translation file instead of dozens.</p>
  
  <p>It can be run in a "one shoot" mode or in watch mode, but I guess the best would be to integrate this directly as a plug-in in the Webpack build process. </p>
  
  <p>So feel free to give me your point of view about this "architectural" choice as, been a newcomer to Webpack, I definitely don't embrace the whole potential of it and I'm maybe misleading according to what can/should be done with it (as a side note of course as it's not the main reason of this post ;)</p>
  
  <p>Thanks in advance for your tips and tricks about it ;) !</p>