Webpack とは？

Webアプリを作るとき、JavaScriptファイルが何十個、何百個にもなることがあるんだ。それを全部バラバラにブラウザに読ませると遅くなるから、1つや数個のファイルにまとめてくれるのがWebpackだよ。引っ越しのとき、荷物をダンボールにまとめるイメージだね。

いや、実はもっといろんなことができるんだ。「loader」という仕組みで、TypeScriptをJavaScriptに変換したり、Sassを普通のCSSに変換したりもできる。さらに「plugin」で画像を圧縮したり、不要なコードを削除したりもするよ。

正直、Webpackの設定ファイル（webpack.config.js）は初心者キラーだよ。何をどう書けばいいかわかりにくくて、「Webpack職人」なんて言葉があるくらい。最近はViteみたいに設定が少ないツールが人気になってきたのも、この設定の複雑さが理由の一つだね。

webpack-dev-serverを使うと、コードを変更した瞬間にブラウザが自動で更新される「ホットリロード」ができるよ。いちいち手動でリロードしなくていいから、開発効率がすごく上がるんだ。

ViteやTurbopackが注目されてるね。ただWebpackの強みは成熟したエコシステムで、ほぼどんな要件にもloaderやpluginが見つかること。実際の現場では「Tree Shaking」という未使用コードの除去と「Code Splitting」という遅延読み込みの設定をどう組み合わせるかが本当に難しくて、ビルドサイズの最適化はベテランでも正解を見つけるのに苦労するポイントなんだよ。