前々回に モダンなフロントエンド開発環境をつくる という記事を書きましたが、その中で使った WebPack-Dev-Server を捨てたのでその背景と、Step-by-Stepの導入フローを書いてみます。 WebPack-Dev-Server を捨てた理由 大きく次の問題がありました。 Scssで@importされているファイルを変更しても、正しくビルドされない TypeScriptのimportは問題ない ビルド時にマップファイルが生成されず、バグが発生したときにそのまま調査に入れない ビルド結果がインメモリでサーブされるため、ビルドされたソースを確認するには別途 webpack コマンドを打たなくてはいけない 特に1番目のものがクリティカルで、CSSを適用する段階では毎回webpackコマンドを打って実際にビルドしなくてはならず、使い物にならなかったためです。 この3つの問題をすべて
![WebPack-Dev-ServerからBrowsersyncに乗り換えた | // sakura note](https://cdn-ak-scissors.b.st-hatena.com/image/square/b6c0d5d052e37419267d2ffbd065538e349f5035/height=288;version=1;width=512/https%3A%2F%2Fsaku.io%2Fwp-content%2Fuploads%2F2016%2F03%2FScreenCapture-2016-03-17-11.09.50.png)