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

はじめに

　対象読者
　サンプルプログラムについて

Part　1：イントロダクション

　1.1 従来型のJavaScriptライブラリ
　1.2 モジュールバンドラーの登場
　1.3 webpackの利点

Part　2：モジュールバンドラーの基本

　2.1 モジュールの基本
　　2.1.1 モジュールを定義する
　　2.1.2 モジュールのインポート
　　2.1.3 import命令のさまざまな記法
　2.2 webpackを利用するための準備
　2.3 webpackの基本

Part　3：設定ファイルの基本

　3.1 設定ファイルの骨組み
　　3.1.1 ショートカットコマンドを準備する
　3.2 開発サーバーの導入
　　3.2.1 補足：開発サーバーの設定
　　3.2.2 watchモードによるファイルの監視
　3.3 本番／開発モードの選択
　　3.3.1 コードの圧縮
　　3.3.2 ソースマップの生成
　　3.3.3 補足：開発／本番コードの区別

Part　4：ローダー

　4.1 スタイルシートのバンドル - css-loader／style-loader
　　4.1.1 css-loader／style-loaderの有効化
　　4.1.2 スタイルシートの準備とインポート
　　4.1.3 スタイルシートを<link>要素で出力する - ExtractTextPlugin
　4.2 画像ファイルをバンドルする - url-loader
　　4.2.1 url-loaderの有効化
　　4.2.2 一定以上の画像データはファイルとして出力 - file-loader
　　4.2.3 url関数による画像のインポート
　　4.2.4 補足：url関数の書き替え
　4.3 フォントファイルをバンドルする - file-loader
　　4.3.1 フォントの準備
　　4.3.2 スタイルシートの準備
　　4.3.3 file-loaderの有効化
　4.4 JSON、HTML／XML、CSV／TSVなどのデータをインポートする
　　4.4.1 JSONデータの取得
　　4.4.2 CSV／TSVデータの取得 - csv-loader
　　4.4.3 HTMLデータの取得 - html-loader
　　4.4.4 XMLデータの取得
　4.5 最新のECMAScriptを利用する - babel-loader
　　4.5.1 babel-loaderの有効化
　　4.5.2 Babelの設定ファイルを準備する - .babelrc
　　4.5.3 補足：Babel＋React環境を構築する
　4.6 TypeScriptのコードをコンパイルする - ts-loader
　　4.6.1 ts-loaderの有効化
　　4.6.2 TypeScriptの設定情報
　4.7 Sassのコードをコンパイルする - sass-loader
　　4.7.1 sass-loaderの有効化
　4.8 JavaScriptの「べからず」なコードを洗い出す - eslint-loader
　　4.8.1 eslint-loaderの有効化
　　4.8.2 ESLintのルールをカスタマイズする
　　4.8.3 ESLintとBabelとの連携

Part　5：プラグイン

　5.1 複数のエントリーポイントを処理する
　　5.1.1 共通のライブラリを分離する
　5.2 トップページを自動生成する - html-webpack-plugin
　　5.2.1 html-webpack-pluginの有効化
　　5.2.2 補足：テンプレートで参照可能な変数
　5.3 出力先フォルダーのクリーンアップ - clean-webpack-plugin
　5.4 バンドル時にコードを圧縮する - terser-webpack-plugin
　　5.4.1 terser-webpack-pluginの設定
　　5.4.2 補足：その他の圧縮オプション
　5.5 スタイルシートを圧縮する - optimize-css-assets-webpack-plugin
　5.6 画像ファイルを圧縮する - ImageminPlugin
　　5.6.1 ImageminPluginのインストール
　　5.6.2 ImageminPluginの設定
　5.7 ビルドファイルにコメントを追加する - BannerPlugin
　5.8設定ファイルを分離する - webpack-merge
　　5.8.1 modeオプションによる切り替え
　　5.8.2 補足：--envオプション