【書評】速習 webpack 第2版
一言で言うと？
Webpack の基礎が手短に学べる本です。
写経しながら読んで、読了までにかかった時間は 180分（3時間）でした。
購入の目的は？
アサインされたプロジェクトで Vue.js を使った開発を行います。
最近の JavaScript の開発に関する知識が乏しかったので、色々と Vue.js の書籍を買って学んでいました。
Vue.js では vue-cli など便利なツールはたくさんあるのですが、 Webpack のことがわかってないと、内部でどう動いているのか？何をやっているのかがわかりません。
Webpack というツールの理解にたくさんの時間を使いたくはなかったので、さくっと学べそうな『速習 WEBPACK 第2版』を買ってみました。
感想は？
数少ない Webpack の本です。
公式のチュートリアルを読むよりも書籍で読みたい人にとって、数少ない選択肢です。
『速習 webpack』に限らず、WINGS系の本はほぼ全部、
「サンプルのためのサンプル」
「公式チュートリアルを言い換えたようなチュートリアル」
みたいな作りになっていることが多いのですが、webpack に関してはこういう作りが正解でした。
どういう人におすすめ？
モダンな JavaScript プロジェクトに初めてアサインされる人におすすめです。
というのも、webpack の機能がある程度わかっていないと、何がどうバンドルされて（まとめられて）、何が画面に出力されているのかが全くわからないからです。
サーバー開発者でも webpack とは無縁ではいられません。
Rails5 以降では webpack が内包されていて、特に webpack を意識しなくても機能を使えるのですが、やっぱり中で何をやっているのかはある程度は理解しておきたいところです。
なので、「これからのweb開発をする技術者の最低限の基礎」として、webpack を速習しておくのはありだと思います。
設定のカタログ集としても使えるでしょう。
良くない部分は？
良いところばかりを紹介しても不公平なので、悪い部分も紹介します。
WINGS系の全ての書籍に通じることですが、「詳しくは拙著『速習 TypeScript』などの専門書を参照してください」みたいな、自社の他の書籍をやたらと勧めてくる姿勢に厚かましさを感じます。
また『速習 TypeScript』を「専門書」と称するのはやや奢りが過ぎるのではないでしょうか。
もちろん悪い本ではないですが、「簡易なチュートリアル」の方が適切な表現でしょう。
ありとあらゆる分野で入門書を書いて、入門者を狙い撃ちにして金を荒稼ぎする掌田津耶乃的なやり方はあまり感心できませんが、 webpack に関しては非常に有用です。
というのも、webpack は入門さえできれば、詳しくはウェブで検索すればいいからです。
目次は？
Part 1：イントロダクション
webpackとは？
従来型のJavaScriptライブラリ
モジュールバンドラーの登場
webpackの利点
対象読者
サンプルプログラムについて
Part 2：モジュールバンドラーの基本
モジュールの基本
モジュールを定義する
モジュールのインポート
import命令のさまざまな記法
webpackを利用するための準備
webpackの基本
Part 3：設定ファイルの基本
設定ファイルの骨組み
ショートカットコマンドを準備する
開発サーバーの導入
補足：開発サーバーの設定
watchモードによるファイルの監視
本番／開発モードの選択
コードの圧縮
ソースマップの生成
補足：開発／本番コードの区別
Part 4：ローダー
スタイルシートのバンドル - css-loader／style-loader
css-loader／style-loaderの有効化
スタイルシートの準備とインポート
スタイルシートをlink要素で出力する - ExtractTextPlugin
画像ファイルをバンドルする - url-loader
url-loaderの有効化
一定以上の画像データはファイルとして出力 - file-loader
url関数による画像のインポート
補足：url関数の書き替え
フォントファイルをバンドルする - file-loader
フォントの準備
スタイルシートの準備
file-loaderの有効化
JSON、HTML／XML、CSV／TSVなどのデータをインポートする
JSONデータの取得
CSV／TSVデータの取得 - csv-loader
HTMLデータの取得 - html-loader
XMLデータの取得
最新のECMAScriptを利用する - babel-loader
babel-loaderの有効化
Babelの設定ファイルを準備する - .babelrc
補足：Babel＋React環境を構築する
TypeScriptのコードをコンパイルする - ts-loader
ts-loaderの有効化
TypeScriptの設定情報
Sassのコードをコンパイルする - sass-loader
sass-loaderの有効化
JavaScriptの「べからず」なコードを洗い出す - eslint-loader
eslint-loaderの有効化
ESLintのルールをカスタマイズする
ESLintとBabelとの連携
Part 5：プラグイン
複数のエントリーポイントを処理する
共通のライブラリを分離する
トップページを自動生成する - html-webpack-plugin
html-webpack-pluginの有効化
補足：テンプレートで参照可能な変数
出力先フォルダーのクリーンアップ - clean-webpack-plugin
バンドル時にコードを圧縮する - uglifyjs-webpack-plugin
uglifyjs-webpack-pluginの設定
補足：その他の圧縮オプション
スタイルシートを圧縮する - optimize-css-assets-webpack-plugin
設定ファイルを分離する - webpack-merge
modeオプションによる切り替え
補足：--envオプション
