ツール
webpack
JavaScript を中心に CSS や画像まで依存グラフとして解析し、1 つ以上のバンドルへまとめる定番モジュールバンドラ。entry からたどり loader でファイルを変換、plugin でビルド工程を拡張し output へ出力、resolve で解決規則を制御する。設定の自由度が高い反面「Module not found」「loader 未設定」「webpack 5 のコアモジュール polyfill 廃止」などで詰まりやすく、devServer や HMR、コード分割も webpack の領域。
問題一覧（3）
webpack-dev-server で変更が反映されない（HMR が効かない）
webpack-dev-server v4 以降は HMR が既定で有効なので、効かないときは設定を足すより先に切り分ける。ファイル変更が検知されているか、置換を受け取るコード側が対応しているか、フルリロードに落ちていないかの 3 点を順に確認する。
更新: 2026-08-11、タグ: webpack-dev-server、hmr、hot-reload
webpack で「Module not found: Error: Can't resolve」が解決できない
import 先を webpack が解決できないと出る。パスの綴り・大文字小文字、拡張子解決 (resolve.extensions)、alias 未設定、依存の未インストールのいずれかを疑う。
更新: 2026-07-17、タグ: module-not-found、resolve、alias
webpack 5 で「process is not defined」やコアモジュールの解決に失敗する
webpack 5 は Node.js コアモジュールの自動 polyfill をやめた。ブラウザ向けビルドで process や crypto を参照すると未定義や解決失敗になる。必要なものだけ resolve.fallback と ProvidePlugin で明示的に補う。
更新: 2026-08-03、タグ: polyfill、process、browser