【書評】速習 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 は入門さえできれば、詳しくはウェブで検索すればいいからです。

 

速習 webpack 第2版 速習シリーズ

速習 webpack 第2版 速習シリーズ

 

 

目次は?

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/XMLCSV/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オプション