Webpack插件错误管理

Question

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

我在Webpack插件文档中看到,可以将err参数传递给基于时序的插件接口(在回调中),但没有进一步解释它如何影响Webpack生命周期,它的构建过程以及如何使用它.它没有解释是否有办法管理其他类型的插件接口的错误.

无论如何,作为第一次尝试,在'emit'生命周期步骤中,我试图传递给err参数a new Error('An error has occurred')或只是一个'An error has occured'值,但在任何一种情况下它确实在控制台中显示给定的err参数(IE很遗憾没有任何参数)特定于错误的颜色),并且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生命周期.

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

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

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

它可以在"单拍"模式或手表模式下运行,但我想最好将它直接集成为Webpack构建过程中的插件.

因此,请随意向我提供关于这种"架构"选择的观点,因为作为Webpack的新手,我绝对不会接受它的全部潜力,而且根据可以/应该做什么,我可能会误导它(作为旁注,当然因为这不是这篇文章的主要原因;)

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

Answer 1

经过半天的webpack代码调试后,我终于对此进行了整理.

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

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

当然不要忘记callback()你的插件是否失败.

这errors.push将:

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

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

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

Answer 2

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

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

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