PR：この記事にはアフィリエイトリンクが含まれます。
Webpack本を探すと、まず迷うのは対応バージョンと扱う範囲です。JavaScriptのバンドル設定からTypeScript連携、本番ビルドまで学びたい人にとって、実務に近い一冊を見つけるのは簡単ではありません。
ここではWebpack 5の専著2冊、Webpack 4の入門書1冊、TypeScriptを含むフルスタック開発書1冊を並べました。Webpackを掘り下げる本とアプリ全体を扱う本では、同じ技術名があっても学べる深さが異なります。
4冊の早見表
| 書名 | 対応・ページ数 | 主な内容 |
|---|---|---|
| SurviveJS – Webpack 5: From apprentice to master | Webpack 5・338ページ | 設定、loader・plugin、分割、最適化 |
 Webpack 5 Up and Running: A quick and practical introduction to the JavaScript application bundler | Webpack 5・220ページ | 基本設定、API、loader・plugin、本番ビルド |
 Webpack for Beginners: Your Step-by-Step Guide to Learning Webpack 4 | Webpack 4・129ページ | 初期設定、開発環境、本番最適化 |
 Modern Full-Stack Development | Webpack章あり・全501ページ | TypeScript、React、Node.jsなどと実アプリ開発 |
最初に確認したいのは対応バージョン。Webpack 5を扱うのは上の2冊です。Webpack 4の入門書は旧設定を知る助けになりますが、現行プロジェクトへ応用する際は書き方の差を見てください。
TypeScriptも扱う本はフルスタック開発書の1冊です。Webpackの専著に比べて章は短く、対象はアプリ全体へ広がっています。書名だけではつかみにくい違いですね。
紙版の価格は販売先や為替、時期によって変わります。購入時は書名と版をそろえ、送料を含む円表示を参考価格の目安にしてください。
Webpack 5を深掘り
「SurviveJS – Webpack 5: From apprentice to master」はJuho Vepsäläinen著で、2020年発行の338ページです。初級者から上級者を対象とし、基本設定から本番向けの改善まで段階的に扱います。Webpack 5を体系的に学ぶ内容です。
読み進めると、開発用と本番用の設定を分け、webpack-mergeで共通部分をまとめる方法が出てきます。環境ごとの差を残しながら重複設定を抑えられる構成です。設定ファイルが大きくなるほど、こうした整理の意味が増します。
loaderやpluginの定義に加えて、独自のloader・pluginを作る章もあります。既存例の使い方で終わらず、ビルド処理を拡張する方法まで学べる点がこの本の強みです。
Code Splitting、Bundle Splitting、Dynamic Loading、tree shakingを個別に扱い、minification、ハッシュ、ビルド分析、性能改善も取り上げます。紙版は著者が最終大幅改訂版と案内しています。一部内容の古さにも触れているため、現行APIを確認しながら読むのが実務的です。
短く学べる入門
Tom Owens著の「Webpack 5 Up and Running: A quick and practical introduction to the JavaScript application bundler」は2020年刊の220ページです。JavaScriptの実務知識を前提に、Webpack 5の設定やオプションを学べます。
「Working with Modules and Code Splitting」の章があり、APIやplugin、loader、本番ビルドと他ツールとの統合も取り上げます。専門書に時間をかける前にWebpack 5の全体像をつかみたい人におすすめです。
目次にはFederated Modulesの章もあります。tree shakingは独立項目として載っていません。最適化全般の深掘りより、Webpack 5の基本構成を知る目的に合います。
Webpack 5 Up and Running: A quick and practical introduction to the JavaScript application bundler
Packt Publishing
Amazonで見るWebpack 4の基本
Mohamed Bouzid著の「Webpack for Beginners: Your Step-by-Step Guide to Learning Webpack 4」は、2020年発行のWebpack 4入門書です。全129ページで、HTML・JavaScript・コマンドラインの基本を持つ初学者を対象とします。Webpackに初めて触れる人の入口として役立ちます。
alias・フォルダー解決・cache busting・外部ライブラリの導入などを、実例に沿って説明します。loaderとpluginも独立した章で扱います。設定項目が増える理由を具体例から追いやすい内容ですね。
Webpack DevServerや即時リフレッシュ、Hot Module Replacementを扱い、本番向け最適化まで収録しています。Webpack 4対応なので、Webpack 5のプロジェクトでは設定例と現行の書き方を照らし合わせてください。
TypeScriptも学ぶ
Frank Zammetti著の「Modern Full-Stack Development」は第2版の501ページです。TypeScript、React、Node.js、Webpack、Python、Django、Dockerを扱い、実アプリを3つ構築します。
TypeScriptの基礎と応用は95〜151ページに置かれています。Webpackは第7章の153〜171ページで取り上げ、NPMとWebpackを使うプロジェクト設定や利用方法も扱います。
Webpackの章は19ページです。loaderやplugin、tree shakingを集中的に学ぶなら専著のほうが適しています。TypeScriptを含むアプリ開発の流れの中でWebpackを知りたい人には、この本がおすすめです。
結論
Webpack 5の設定構成、loader・pluginからコード分割、tree shaking、本番最適化まで学ぶなら、「SurviveJS – Webpack 5」を選んでください。338ページの専著で、設定の仕組みも詳しく学べます。紙版の一部に古い内容がある点を踏まえ、現行APIを確認しながら読むのが堅実です。
短い紙面でWebpack 5の基本を学びたい人には「Webpack 5 Up and Running」が合います。Webpack 4の設定を知りたい初学者には「Webpack for Beginners」をおすすめします。TypeScriptやReactを含めた開発全体を学ぶ場合は「Modern Full-Stack Development」を選ぶとよいでしょう。
読書中はentryから出力まで設定を追い、変換・型チェック・最適化の役割も区別してください。書籍の記述と手元のビルド結果を照らすと、案件に合うバンドル構成へ調整しやすくなります。
Amazon の PC をスコア化してみた
Amazonにある8〜14インチの小型WindowsタブレットやノートPCを、スペック別にスコア化して比較・ランキング。
