Webpack 插件错误管理

Question

这篇文章的主要目标是在编写 Webpack 插件时获取有关错误/警告管理的额外信息。

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

无论如何，作为第一次尝试，在 'emit' 生命周期步骤中，我尝试将 new Error 传递给 err 参数('发生错误') 或只是一个 '发生错误' 值，但在任何一种情况下，它确实按原样在控制台中显示给定的 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
      }
  ...

不幸的是，这样，我最终只是将无色字符串显示到标准输出，而不会以任何方式影响 Webpack 生命周期。

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

关于警告管理，我想它必须通过直接在插件本身中使用正确的颜色调用 process.stdout.write() 来执行，或者在编译中提供一些警告集合参数...但与我到目前为止在这个问题中报告的内容类似...这只是猜测:p

郑重声明，我问这个问题是因为我编写了一个小型构建工具，其目标是将分散在应用程序中的所有翻译聚合到一个文件中。这是为了让我们的客户处理单个翻译文件而不是数十个。

它可以在“一次性”模式或监视模式下运行，但我想最好的办法是将其作为插件直接集成到 Webpack 构建过程中。

因此，请随意向我提供您对这种“架构”选择的看法，作为 Webpack 的新手，我绝对不会接受它的全部潜力，并且根据可以/应该做什么，我可能会产生误导完成它(当然作为旁注，因为这不是这篇文章的主要原因;)

提前感谢您提供有关它的提示和技巧；)!

Answer 1

经过半天的webpack代码调试，终于解决了这个问题。

真正的做法是以这种方式提供 webpack 编译的错误集合:

compilation.errors.push( new Error( '解释构建失败的原因' ) )

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

此errors.push将:

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

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

遗憾的是 webpack 文档是如此蹩脚......我绝对希望 Webpack 2 不会有那些令人费解的文档缺点:p