-
ID:EpPNhx さんの質問

webpackとgulpの違いとか使い分けとか教えてください!使い分けというか、gulpからwebpack実行したりも出来るみたいだし、なんかよくわかりません!先端突き進んでる方、教えてください!お願いします!


  • gulpは使ってるのですが、jsのrequireしてるファイルを統合する必要性が生じてwebpackにたどり着きましたが、gulpとの違いとかで混乱中です。

みんなの回答 1 件

ID:Bifk5s さんの回答

結論としては、gulpとwebpackの使い分けは、場合や好みによる部分も大きいです。
webpackはbrowserifyみたいに「複数ファイルを1つのjsファイルにまとめる」ものです(file-loeaderとか使えば他のこともできるけど)。
つまり、requireとかで繋がった複数のjsファイルを1つに結合することができます。
さらに、webpackではrequireの概念を拡張して、loaderという機能を用いてjsに限らずなんでも読み込むことができます。例えば、画像ファイルをdataURLにしてjsファイルに含めるなど、いろいろなことができます。
一方のgulpはタスクランナーで、複数の作業を決まった順番で行ったりできます。
そう考えれば、gulpからwebpackを使うのは納得が行きます。一連のビルド作業のうち、「ファイルを結合する」という部分をwebpackにやってもらうのです。
ただ、webpackでもgulp(の他のタスク)でもできるようなものも多くあります。例えばSassやTypeScriptのコンパイルは、別のgulpタスクでコンパイルしてからwebpackに渡すこともできるし、webpackのloaderを用いて直接requireすることもできます。究極的には、webpackのみで全て行うことができる場合もあるでしょう。

ID:EpPNhx

ありがとうございます!!webpackはその名の通り、複数の何かを統合することが主目的のものなのですね!

いつもはgulpでtypescriptのコードをコンパイルしているのですが、一つのファイルにまとめる必要があってwebpackを導入しようと思った次第です。


  • コンパイルしたものをwebpackに渡せるということはts-loaderは不要ということなのでしょうか?
ID:Bifk5s

gulp-typescriptか何かを使ってTypeScriptからJavaScriptコードを生成する → 生成されたコードをwebpackにかける という手順をふめばts-loaderは不要です。

ID:EpPNhx

複数のtsファイルをwatchしてgulp-typescriptでコンパイルしてるのですが、複数のコンパイル後のjsファイルをwebpackに渡して、1つのjsファイルを作るといった流れでしょうか?それができれば理想的です!

ID:Bifk5s

その流れで合っています。webpackはエントリポイントが指定できますから、エントリポイントにgulp-typescriptで出力されたjsファイルの場所を指定してあげればできます。
ちなみに、webpackもwatchができます。その場合、tsファイルが変更されるとgulp-typescriptのwatchで再コンパイルされ、出力されたjsファイルにwebpackが反応して再結合されます。

ID:EpPNhx

ありがとうございます!!エンドポイントではコンパイル後の複数のjsファイルを羅列して指定するのではなく、それらのjsファイルが含まれているディレクトリまでのパスを指定するのですか?それとも、パス/*.jsみたいな指定をするのでしょうか?

ID:Bifk5s

エントリポイントは、基本的にはjsファイルを1つだけ指定します。
そのファイルを実行したのと同じ動作をする結合ファイルが出力されます。
例えば、
a.js
console.log(’foo’);
require(’./b.js’);

b.js
console.log(’bar’);

という場合、a.jsをエントリポイントにするとfoo barと表示されますが、b.jsをエントリポイントにするとbarだけ表示されます。なので、ここから動作を開始するというようなファイルを作り、それをエントリポイントにしてください。

ID:EpPNhx

ありがとうございます!メインのいろんな自作モジュール読み込んでるファイルをエンドポイントに設定すれば大丈夫なのですかねー。それがダメなら依存モジュールを読み込むだけのファイル作って、それをエンドポイントにすると良いのかな。今日試してみます!ご丁寧に説明頂いてありがとうございました!

ID:EpPNhx

無事出来ました!ただ、browserifyに訳あって切り替えました。

最終更新日:2016-07-09 (10,499 views)

関連するトピックス

ページ上部に戻る