2021年11月へ

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

公開日：

最終更新日：

要約

webpack-dev-serverの使い方が分からず、公式リファレンスのみを頼りに設定を試みたが、バージョンアップでオプションが変わりエラーに直面。最終的に、webpackのwatchオプションを使用しつつnodeコマンドでサーバーを立てる方法に落ち着いた。M1 Proへの乗り換えでコンパイル速度も向上したと感じている。

  • webpack-dev-server
  • webpack
  • 開発サーバー
  • ファイル監視
  • 設定ファイル
  • バージョンアップ
  • Vue CLI
  • watchオプション
  • Node.js
  • コンパイル速度

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でビルドするような，たいした処理・作業はしてないんですけどね。