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