如何在 gulp 中显示 webpack 错误答案

【问题标题】：How to show webpack errors in gulp如何在 gulp 中显示 webpack 错误
【发布时间】：2019-02-22 04:19:36
【问题描述】：

我有一个使用 webpack 转译的 TypeScript 项目，构建任务由 gulp 驱动。用这个简单的任务来演示我的问题：

var webpack = require('webpack');
var webpackStream = require("webpack-stream");

gulp.task("check", function() {
        return gulp.src("*")
            .pipe(webpackStream(require("./webpack.config.js"), webpack))
            .pipe(gulp.dest(OUTPUT_DIR));
    }
);

现在一切顺利，gulp check 工作正常。现在假设我犯了一些编码错误——这个 gulp 任务会发出：

[10:20:02] Starting 'check'...
[hardsource:chrome] Tracking node dependencies with: yarn.lock.
[hardsource:chrome] Reading from cache chrome...
(node:20232) UnhandledPromiseRejectionWarning
(node:20232) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). (rejection id: 1)
(node:20232) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.
[10:20:08] The following tasks did not complete: check
[10:20:08] Did you forget to signal async completion?

这是非常缺乏信息的。如果我从检查任务中删除 .pipe(gulp.dest(OUTPUT_DIR));，我会收到原始错误消息。例如：

[10:35:42] Starting 'check'...
[hardsource:chrome] Tracking node dependencies with: yarn.lock.
[hardsource:chrome] Reading from cache chrome...
[10:35:48] 'check' errored after 5.96 s
[10:35:48] Error in plugin "webpack-stream"
Message:
    ./myfile.ts
Module build failed: Error: Typescript emitted no output for C:\Projects\myfile.ts.
    at successLoader (C:\Projects\***\node_modules\ts-loader\dist\index.js:41:15)
    at Object.loader (C:\Projects\***\node_modules\ts-loader\dist\index.js:21:12)
 @ ./src/background/background.ts 16:25-54
 @ multi ./src/background/backgroundC:\Projects\***\src\myfile.ts
./src/myfile.ts
[tsl] ERROR in C:\Projects\***\src\myfile.ts(305,28)
      TS2345: Argument of type 'number | undefined' is not assignable to parameter of type 'number'.
  Type 'undefined' is not assignable to type 'number'.
Details:
    domainEmitter: [object Object]
    domain: [object Object]
    domainThrown: false

在 webpackStream 之前或之后将管道添加到 gulp-load-plugins.logger 没有帮助。我可以将 gulp 流通过管道传输到 gulp.dest，并且仍然可以获得信息丰富的 webpack 错误消息吗？怎么样？

【问题讨论】：

标签： typescript webpack gulp

【解决方案1】：

即使没有hard-source-webpack-plugin，我也会发生这种情况。好像是webpack-stream本身的问题：https://github.com/shama/webpack-stream/issues/34

代替：

.pipe(webpackStream(require("./webpack.config.js"), webpack))
.pipe(gulp.dest(OUTPUT_DIR));

向 webpackStream 管道添加错误处理程序：

.pipe(webpackStream(require("./webpack.config.js"), webpack))
    .on('error',function (err) {
      console.error('WEBPACK ERROR', err);
      this.emit('end'); // Don't stop the rest of the task
    })
.pipe(gulp.dest(OUTPUT_DIR));

【讨论】：

【解决方案2】：

我将发布解决方案而不是删除问题，以防将来对某人有用。

在我们的例子中，问题原来是使用了一个名为 hard-source-webpack-plugin 的 webpack 构建加速器。显然它是known issue - github 链接包含一个潜在的解决方法。

【讨论】：