webpack-dev-server

Hot Module Replacement (HMR)

Hot Module Replacement (HMR) は、ファイルの更新を自動でブラウザに反映する仕組みです。
HMRでは、ページ全体を更新することなく、変更したモジュールのみを置き換えることで画面を更新します。

HMRにより、ファイルの変更を自動で、ブラウザに反映してくれるため、開発の手助けとなります。
また、差分だけの変更をすることで、変更を素早く反映することができます。

webpack-dev-server

webpackでHMRを利用するには、webpack-dev-serverを利用します。
webpack-dev-serverでは、JavaScriptの変更を検知し、自動でブラウザに反映します。

開発時には、webpack-dev-serverを利用し、HMRを活用しながら開発を行います。
一方で、デプロイ時には、webpackでバンドルし、バンドルされたファイルをデプロイすることになります。

終わり