12月14, 2017

webpack编译出错处理

下午同事问我:有没有办法监听webpack的编译失败?他google了没找到。

然后我就开始搜索”webpack event“,找到Compiler,在里面有一个对应的事件:

alt

npm上有一个包叫webpack-event-plugin,用它来写生命周期的hook(钩子)相当地容易。

new WebpackEventPlugin([
    {
        hook: "failed",
        callback: (error) => {
            console.log(error)
        }
    }
])

发现死活触发不了。在数组中加了一个done的钩子,即:

new WebpackEventPlugin([
    {
        hook: "done",
        callback: (stats) => {
            console.log("complie success")
        }
    }
])

这样是OK的,让我很抓狂。

在搜索了多个资料后,发现一个issue,然后就顺利搞定了。

new WebpackEventPlugin([
    {
        hook: "done",
        callback: (stats) => {
            if (stats.compilation.errors && stats.compilation.errors.length) {
                // console.log(stats.compilation.errors);
                console.log("compile failed");
                process.exit(1);
            }
        }
    }
])

上面代码的意思是当编译出错时,打印”compile failed“,且退出程序。

alt

本文链接:www.my-fe.pub/post/webpack-compile-fail-callback.html

-- EOF --

Comments

评论加载中...

注:如果长时间无法加载,请针对 disq.us | disquscdn.com | disqus.com 启用代理。