MENU
シンプル美と機能性を両立させた、国内最高峰のWordPressテーマ『SWELL』
WEB制作者向け無料テーマ「Arkhe」をリリースしました

webpack-streamでエラー発生時に処理を終了させずに監視を続ける方法（plumber不要）

ツール

Gulpにwebpackを導入するために webpack-stream を使っているのですが、よくある導入系記事のコードをそのまま使っているとjsのビルド中？にエラーがあった場合に監視状態が終了してしまいます。

plumberをつけても効果なしで困っていたのですが、やっとこさ解決できたのでメモしておこうと思います。

目次

よくあるwebpack-streamの使い方

Gulpにwebpackを導入する系の記事で、webpack-streamを使っているもののほとんどが以下のような使い方で紹介されていました。

const webpack = require("webpack");
const webpackStream = require("webpack-stream");
const webpackConfig = require("./webpack.config");

gulp.task("webpack", function () {
    return webpackStream(webpackConfig, webpack)
    .pipe(gulp.dest("./js"));
});

gulp.task("default", function () {
    gulp.watch("./js/src/*.js", ["webpack"]);
});

return webpackStream()という使い方のやつです。

これだとエラー発生時に監視が止まってしまい、一旦control + cで処理を終了させてまたgulpコマンド打つ、という面倒なことをしなくてはなりません。

ちなみに、このコードにplumberをつけても無意味です。

これは意味ない

gulp.task("webpack", function () {
    return webpackStream(webpackConfig, webpack)
    .pipe(plumber({ errorHandler: notify.onError('<%= error.message %>') }))
    .pipe(gulp.dest("./js"));
});

解決方法

returnではなく、普通にgulp.src()で使います。

*追記：return を使った最終解決案を発見しました。

const webpack = require("webpack");
const webpackStream = require("webpack-stream");
const webpackConfig = require("./webpack.config");

gulp.task("webpack", function () {
    gulp.src('js/src/*.js')
        .pipe(webpackStream(webpackConfig, webpack))
        .pipe(gulp.dest("./js"));
});

gulp.task("default", function () {
    gulp.watch("./js/src/*.js", ["webpack"]);
});

これだけで、エラー発生時も監視が終わらなくなりました。

なぜだかわかりませんが、plumber使わなくてもいいっぽいです。

さらにオススメの方法

エラーメッセージをシンプルに見やすくするための方法です。

タスクの中身にちょっと付け足します。

gulp.task("webpack", function () {
    gulp.src('js/src/*.js')
        .pipe(webpackStream(webpackConfig, webpack)
            .on('error', function (e) {
                this.emit('end');
            })
        )
        .pipe(gulp.dest("./js"));
});

そこまで詳しいことは分からないのですが、errorイベント発生時にemit('end')、つまり強制的に webpackStream の処理を完了させている？ものだと思います。

こうすると、エラーメッセージが赤色のテキストで表示され、しかもかなりシンプルになる場合があります。

例えば、reqire() するときにパスを誤ってnot findエラーが起きると、通常だとかなり長めのエラーメッセージが出てきますが、この方法だと次のようなシンプルなメッセージだけになります。

ERROR in ./src/main.js
Module not found: Error: Can't resolve 'mymethod' in '/Users/.../src'
 @ ./src/main.js 7:12-28

追記：問題発見

returnではなくgulp.src()を使い、その後さらにon('error')でエラーメッセージを見やすくする方法を紹介しましたが、gulp.src()を使うと一つ問題がありました。

webpackの Finish メッセージのタイミングがずれてしまうのです。

通常、webpackを使うと以下のような処理メッセージが出力されます。

[11:16:45] Starting 'webpack'...
[11:16:55] Version: webpack 4.12.0
Built at: 2018-06-25 11:16:55
  Asset     Size  Chunks             Chunk Names
main.js  128 KiB       0  [emitted]  main
Entrypoint main = main.js
[11:16:55] Finished 'webpack' after 2.93 s

「Start -> 処理内容の表示 -> Finish」という順番です。

しかし、Finishメッセージが一瞬で表示された後、数秒たってから実際にwebpackの処理が行われるという謎の現象が起こっていたのです。

[11:16:45] Starting 'webpack'...
[11:16:55] Version: webpack 4.12.0
[11:16:55] Finished 'webpack' after 200 ms
Built at: 2018-06-25 11:16:55
  Asset     Size  Chunks             Chunk Names
main.js  128 KiB       0  [emitted]  main
Entrypoint main = main.js

処理的には問題ないのですが、気がついてしまうとなんだか気持ち悪くて慣れません。

追記：最終解決案

上記のように、少し問題があったのでもう少し粘ってみたところ、なんの異常もなく、かつ監視が止まらない方法が見つかりました。

returnを使った書き方で、on('error')を付け足します。

これで解決

gulp.task("webpack", function () {
    return webpackStream(webpackConfig, webpack).on('error', function (e) {
        this.emit('end');
    })
    .pipe(gulp.dest("./js"));
});

これで万事解決！何も問題ないかと思います！

ツール
Gulp Webpack

この記事が気に入ったら
フォローしてね！

よかったらシェアしてね！
  • URLをコピーしました！
  • URLをコピーしました！

コメント

コメント一覧 （1件）

  • 同じ問題で頭を抱えていたところにこのクリティカルな記事を見つけました！
    ありがとうございます！

目次