メサイア・ワークス

webpack-dev-serverとwebpack.config.jsを使って、ローカルWebサーバでソース修正をブラウザに即時反映させる。

webpack-dev-serverとwebpack.config.jsを使って、ローカルWebサーバでソース修正をブラウザに即時反映させる。

前回の続き

webpack4(複数のjs/css/imgファイルを1ファイルにまとめてくれる)で2個のjsファイルをmain.jsにまとめてみた。hello,world的なやつ。

1, まず、webpackの開発用ローカルサーバをインストールする

2, package.jsonのscriptsのstartで、開発用ローカルサーバを起動させる

3, ルートディレクトリに、webpack.config.jsファイルを作成。
developmentモードで起動。Webルートはdistフォルダを指定

4, 開発用ローカルサーバを起動させる。

この状態で、src/sub.jsなどでalert文字列を修正して保存すると自動的にブラウザリロードが起こる。
gulpとbrowser-syncの組み合わせがなくても、webpackだけで自動リロードが出来た。

モバイルバージョンを終了