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

本書は、webpackの使い方を5個のPartに分けて、サンプルコードとともに詳しく解説しています。
本書掲載のサンプルは、サポートページ（https://wings.msn.to/index.php/-/A-03/WGS-JST-002/）からダウンロード可能です。どんどん動かして試してみてください。

※本書は、旧版「速習 webpack」を執筆時点（2020年9月）の最新情報で改訂したものです。

【対象読者】
本書はJavaScriptをはじめとしたフロントエンドのコードをバンドルするためのツールであるwebpackを学ぶ人のための書籍です。
その性質上、基盤となるJavaScript言語については、基本的な理解があることを前提としています。本書でもできるだけ細かな解説を心掛けていますが、JavaScriptについてきちんと押さえておきたいという方は、拙著「改訂新版 JavaScript本格入門（https://wings.msn.to/index.php/-/A-03/978-4-7741-8411-1/）」（技術評論社）、「JavaScript逆引きレシピ　第2版（https://wings.msn.to/index.php/-/A-03/978-4-7981-5757-3/）」（翔泳社）などの専門書を合わせてお読みいただくことをお勧めいたします。

ただし、ECMAScript 2015で導入されたモジュール（ES Modules）の構文については、本書の内容にも深くかかわるため、Part 2で解説します。

【目次】
はじめに
　対象読者
　サンプルプログラムについて

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>要素で出力する – MiniCssExtractPlugin
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オプション

書籍情報
　著者プロフィール
　基本情報
　サポートサイト
　表紙の写真について

【著者プロフィール】
山田 祥寛（やまだ よしひろ）
Microsoft MVP for Visual Studio and Development Technologies。執筆コミュニティ「WINGS プロジェクト」の代表でもある。主な著書に「速習Spring Boot」「速習Django3」「速習TypeScript 第2版」「速習React」（Amazon Kindle）、「改訂新版JavaScript本格入門」「Angularアプリケーションプログラミング」（技術評論社）、「独習Java 新版」「独習C# 新版」「独習Python」「独習Javaサーバサイド編 第2版」（翔泳社）、「はじめてのAndroidアプリ開発 第3版」（秀和システム）、「これからはじめるVue.js実践入門」（SBクリエイティブ）など。
https://www.wings.msn.to/

• 速習webpack 速習シリーズ