実現したいこと
今までGulpを使っていたのですが、開発環境にwebpackを導入しようと考えています。
Webpack入門と公式ドキュメントを参考に、開発環境を整えました。
gulpを使っているときは、SassをコンパイルしBrowserSyncのstreamでプレビューをしていました。
stream機能が大変便利で、今でも職場では使っているのですがwebpackではできないのでしょうか?
webpack-dev-serverでhotオプションをつけて自動でリロードするようにしたのですが、ブラウザ全体がリロードされてしまうので、cssのみの更新にわざわざブラウザ全体の更新に時間を割きたくはないです。
試したこと
試したことといえば、hotオプションをつけることくらいで、他は公式ドキュメントを読み漁りそれっぽいものを探しましたが全然見つかりませんでした。
憶測と解決方法
webpackの本来の目的は、画像やcssなどをすべてjsにまとめ通信回数を減らすことでwebサイトの高速化を図るためのものであり、そもそもsassなどをコンパイルするためのものではないことは理解しています。
また、gulpの時はhtml、jsの更新時は普通にreloadオプションを使うことが進められています。(ブラウザにうまく反映されないため)
これらを踏まえて思うのは、webpackは毎回毎回更新するたびにコンパイルしてjsにしているので、直接的にブラウザを更新しないとうまく反映されないから、webpack-dev-serverにはstream機能みたいなものが存在しないのでしょうか?
また、上記の理由でwebpackではstreamなどが実現できないのであれば、一旦、gulpでサイトを構築し、最終的にwebpackでjsでまとめるのが最善なのでしょうか?
そして、webpack-Streamでgulpとwebpackを連携させる方法も一つの解決方法なのかもしれません。ですが、最終的にjsにまとめることが目的であれば、先に述べたgulpで一旦構築し、最終的にwebpackでまとめるというとwebpack-Streamで連携させるのはどちらがいいのでしょうか?
個人的には最終的にwebpackで纏めれば十分な気がします。webpack-streamを使う理由はなにがあるのでしょうか?同時にコンパイルするタスクを増やしているだけのような気がします。
あなたの回答
tips
プレビュー