webpack-dev-server の正しい使い方が分からない

Web教材を開発している中で，webpack-dev-serverなるものを見つけました。

しかし，資料がない

あてになるのは，上に示した公式リファレンスぐらいです。

というのも，webpackがversion4から5になったためか，

webpack-dev-serverのオプションも大量に変わっており，

先人の残した資料をもとに設定ファイルを書くと，

「そんなオプションはない」

と強めに怒られます。

結局使わない

何ができるか，正しく把握していないのですが，

ファイル更新を動的に監視しつつ，サーバーを立ち上げ，

そちらの描画もファイル更新に合わせて再描画するということでしょうか。

前いじった，Vue CLIの機能に似ている気がします。

＊Vue CLIらが，webpack-dev-serverを使っているのかな。

　ソース見ないとわからないけれど。

webpackのwatchオプションでファイルを監視しながらnodeコマンドでサーバーを立てる

落ち着く先はこんな感じです。

% node index.js

で，開発サーバーを立てておいて，

$ npm run webpack

といった具合で，ファイル監視・更新させています。

まとめて，１つのコマンドにしています。

watch
  node index.js & webpack --mode=development --watch --config webpack.config.js

これで，

% npm run watch

こうですね。

M1 Pro に乗り換えたためか，単に，プラシーヴォ効果か，コンパイルがめちゃくちゃ早くなった気がします。

＊XCodeでビルドするような，たいした処理・作業はしてないんですけどね。

---