[英]How to show webpack errors in gulp
I have a TypeScript project that is transpiled with webpack, and the build tasks are driven by gulp.我有一个用 webpack 转译的 TypeScript 项目,构建任务由 gulp 驱动。 Take this simple task to demonstrate my question:拿这个简单的任务来演示我的问题:
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));
}
);
Now when all is well, gulp check
works fine.现在当一切顺利时, gulp check
工作正常。 Now suppose I made some coding error - this gulp task would emit:现在假设我犯了一些编码错误 - 这个 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?
Which is very uninformative.这是非常缺乏信息的。 If I remove .pipe(gulp.dest(OUTPUT_DIR));
如果我删除.pipe(gulp.dest(OUTPUT_DIR));
from the check task, I get the original error message.从检查任务中,我收到了原始错误消息。 For example:例如:
[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
Adding pipes to gulp-load-plugins.logger
either before or after the webpackStream doesn't help.在 webpackStream 之前或之后向 gulp gulp-load-plugins.logger
添加管道都无济于事。 Can I pipe the gulp stream to a gulp.dest, and still get the informative webpack error messages?我可以将 gulp 流通过管道传输到 gulp.dest,并且仍然获得信息丰富的 webpack 错误消息吗? How?如何?
I had this happen even without hard-source-webpack-plugin
.即使没有hard-source-webpack-plugin
我也发生了这种情况。 It seems to be a problem with webpack-stream
itself: https://github.com/shama/webpack-stream/issues/34似乎是webpack-stream
本身的问题: https : //github.com/shama/webpack-stream/issues/34
Instead of:代替:
.pipe(webpackStream(require("./webpack.config.js"), webpack))
.pipe(gulp.dest(OUTPUT_DIR));
Add an error handler to the webpackStream pipe:向 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));
I'm posting the solution instead of deleting the question, in case it's of use to someone in the future.我发布解决方案而不是删除问题,以防将来有人使用它。
In our case the problem turned out to be usage of a webpack build accelerator called hard-source-webpack-plugin .在我们的例子中,问题是使用了名为hard-source-webpack-plugin的 webpack 构建加速器。 Apparently it's a known issue - and the github link includes a potential workaround.显然这是一个已知问题- github 链接包含一个潜在的解决方法。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.