【無料で読める】速習webpack 速習シリーズ

2024年12月15日 2024年12月15日 6分34秒

KUbooks

著者：山田祥寛
ページ数：114

~~¥500~~ → ¥0

フロントエンド（JavaScript）開発には欠かせないwebpackを素早くマスターしよう。
本書は、webpackの使い方を5つのPartに分けて、サンプルコードとともに詳しく解説しています。サンプルはサポートサイトからダウンロード可能です。

【対象読者】
本書は、webpackについて短時間で概要を掴みたい方のための書籍です。
webpackを学ぶための書籍ということで、その基盤となるJavaScriptについては、基本的な理解があることを前提としています。改めてJavaScriptについてきちんと押さえておきたいという方は、「改訂新版JavaScript本格入門」（技術評論社）などの専門書も合わせて参照してください。

【目次】
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オプション
書籍情報
　著者プロフィール
　基本情報
　サポートサイト

【著者プロフィール】
山田祥寛（やまだよしひろ）
Microsoft MVP for Visual Studio and Development Technologies。執筆コミュニティ「WINGS プロジェクト」の代表でもある。主な著書に「速習Vue.js」「速習 ASP.NET Core」「速習 TypeScript」「速習 ECMAScript 6」（WINGSプロジェクト・Kindle版）、「改訂新版JavaScript本格入門」「Angularアプリケーションプログラミング」（技術評論社）、「独習C# 新版」「独習PHP 第3版」（翔泳社）、「はじめてのAndroidアプリ開発第2版」（秀和システム）など。
https://wings.msn.to/