Webpack插件错误管理

Question

这篇文章的主要目的是在写一个Webpack插件的同时获得关于错误/警告管理的额外信息。

我已经在Webpack plug-in documentation中看到，可以将err参数传递给基于计时的插件接口(在回调中)，但没有进一步解释它如何影响Webpack的生命周期、其构建过程以及如何使用它。它也没有解释是否有一种方法可以使用其他类型的插件接口管理错误。

无论如何，作为第一次尝试，在'emit'生命周期步骤中，我尝试向err参数传递new Error('An error has occurred')或'An error has occured'值，但在这两种情况下，它确实会在控制台中按原样显示给定的err参数(即，遗憾的是，没有任何错误的特定颜色)，并且webpack-sev-server卡住了：

  function WpAggregationPlugin() {
    this.startTime = Date.now();
    this.prevTimestamps = {};
  }

  WpAggregationPlugin.prototype.apply = function(compiler) {
    compiler.plugin( 'emit', (compilation, callback) => {

      var changedFiles = Object.keys(compilation.fileTimestamps).filter( watchfile => 
        this.prevTimestamps[watchfile] &&
        (this.prevTimestamps[watchfile] < (compilation.fileTimestamps[watchfile] || Infinity)) )

      // compilation.errors.push(new Error('...'))

      this.prevTimestamps = compilation.fileTimestamps;

      if( changedFiles.length <= 0 ) {
        callback()
      } else {
        process.stdout.write( `File modification detected :\n${JSON.stringify(changedFiles, null, 4)}\n` )
        callback( '...' )
      }
    } );
  };

  module.exports = WpAggregationPlugin;

因此，它需要一个额外的回调调用，如下所示，以便让Webpack构建过程恢复：

  ...
      if( changedFiles.length <= 0 ) {
        callback()
      } else {
        process.stdout.write( `File modification detected :\n${JSON.stringify(changedFiles, null, 4)}\n` )
        callback( '...' )
        callback()       // EXTRA CALL
      }
  ...

不幸的是，通过这种方式，我最终只是向stdout显示了未着色的字符串，而不会以任何方式影响Webpack的生命周期。

我试图实现的是，在我的错误情况下，显示红色的错误消息，并防止包构建过程以valid状态结束，直到新的构建最终让我的插件运行时没有错误。

关于警告管理，我猜它必须通过直接在插件本身中使用正确的颜色调用process.stdout.write()来执行，或者在编译参数中提供一些警告集合……但就像我在这个问题中所说的那样……这只是猜测:p

根据记录，我问这个问题是因为我写了一个很小的构建工具，它的目标是将分散在应用程序中的所有翻译聚合到一个文件中。这是为了让我们的客户只处理一个翻译文件，而不是几十个。

它可以在“一次拍摄”模式下运行，也可以在手表模式下运行，但我想最好的方法是将其直接作为插件集成到Webpack的构建过程中。

因此，请随时告诉我你对这个“架构”选择的看法，因为作为一个新手，我肯定不会拥抱它的全部潜力，根据它可以/应该做什么，我可能是在误导(作为附注，因为这不是这篇文章的主要原因;)

提前感谢您的提示和技巧;)！

Answer 1

经过半天的webpack代码调试，我终于把这个问题理清了。

真正的问题是以这种方式提供给webpack编译的错误集合：

compilation.errors.push( new Error( 'explain why the build failed' ) )

当然，无论您的插件是否失败，都不要忘记callback()。

此errors.push将：

• 阻止webpack-dev-server处理捆绑包
• 在标准输出上以红色显示错误消息
• 在客户端/浏览器端的webpack标头部分报告错误消息...而不是你的应用！(当然，如果您是通过http://yourDN:yourPort/webpack-dev-server访问的)

最新的一点非常适合强制您的开发人员在重新开始编码会话之前修复这些错误;)

遗憾的是，webpack的文档太差劲了……我绝对希望Webpack 2不会有那些令人费解的文档缺陷:p

Answer 2

我目前正在写一个Webpack插件，也遇到了同样的问题。我尝试查看一些现有的插件以供参考，但得出了与您相同的结论:没有用于此的基础设施。以extract-text-webpack-插件为例：

https://github.com/webpack-contrib/extract-text-webpack-plugin/blob/master/index.js

它基本上使用console.warn和throw new Error来处理东西。您可以将错误推送到compilation对象，但我不知道如何处理，这显然不适用于某些入口点。