webpackとgulpの違いとか使い分けとか教えてください!使い分けというか、gulpからwebpack実行したりも出来るみたいだし、なんかよくわかりません!先端突き進んでる方、教えてください!お願いします!
結論としては、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のみで全て行うことができる場合もあるでしょう。
ありがとうございます!!webpackはその名の通り、複数の何かを統合することが主目的のものなのですね!
いつもはgulpでtypescriptのコードをコンパイルしているのですが、一つのファイルにまとめる必要があってwebpackを導入しようと思った次第です。
gulp-typescriptか何かを使ってTypeScriptからJavaScriptコードを生成する → 生成されたコードをwebpackにかける という手順をふめばts-loaderは不要です。
複数のtsファイルをwatchしてgulp-typescriptでコンパイルしてるのですが、複数のコンパイル後のjsファイルをwebpackに渡して、1つのjsファイルを作るといった流れでしょうか?それができれば理想的です!
その流れで合っています。webpackはエントリポイントが指定できますから、エントリポイントにgulp-typescriptで出力されたjsファイルの場所を指定してあげればできます。ちなみに、webpackもwatchができます。その場合、tsファイルが変更されるとgulp-typescriptのwatchで再コンパイルされ、出力されたjsファイルにwebpackが反応して再結合されます。
ありがとうございます!!エンドポイントではコンパイル後の複数のjsファイルを羅列して指定するのではなく、それらのjsファイルが含まれているディレクトリまでのパスを指定するのですか?それとも、パス/*.jsみたいな指定をするのでしょうか?
エントリポイントは、基本的にはjsファイルを1つだけ指定します。そのファイルを実行したのと同じ動作をする結合ファイルが出力されます。例えば、a.js console.log(’foo’); require(’./b.js’);
b.js console.log(’bar’);
という場合、a.jsをエントリポイントにするとfoo barと表示されますが、b.jsをエントリポイントにするとbarだけ表示されます。なので、ここから動作を開始するというようなファイルを作り、それをエントリポイントにしてください。
ありがとうございます!メインのいろんな自作モジュール読み込んでるファイルをエンドポイントに設定すれば大丈夫なのですかねー。それがダメなら依存モジュールを読み込むだけのファイル作って、それをエンドポイントにすると良いのかな。今日試してみます!ご丁寧に説明頂いてありがとうございました!
無事出来ました!ただ、browserifyに訳あって切り替えました。
みんなの回答 1 件
結論としては、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のみで全て行うことができる場合もあるでしょう。
関連するトピックス