山田祥寛/著
WINGSプロジェクト/発行
定価 500円
Kindle版・ 127ページ・ 4色
発刊日： 2018年4月27日

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