速習 webpack 第2版
| 著者 | 山田祥寛 |
|---|---|
| 出版社 | WINGSプロジェクト |
| 価格 | 500円(税込) |
| 判型 | Kindle版・4色 |
| ページ数 | 145ページ |
| 発売日 | 2020年9月17日 |
| シリーズ | 速習(QUICK MASTER - WINGS) |
| 対象レベル | 初級 |
サクッと学べる。webpackの解説書。
フロントエンド(JavaScript)開発には欠かせないwebpackを学ぶ電子書籍です。webpackの使い方を5個のPartに分けて、サンプルコードとともに詳しく解説しています。隙間時間などを利用してサクッとwebpackをマスターしましょう。
※本書は、旧版「速習 webpack」を執筆時点(2020年9月)の最新情報で改訂したものです。
更新履歴
更新情報はありません。
目次
- はじめに
- 対象読者
- サンプルプログラムについて
- 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オプション
正誤表
現在、正誤情報はありません。
FAQ
現在、FAQはありません。
ダウンロード
お問い合わせ
書籍に関するご質問や誤りのご報告、ご意見・ご感想などをお寄せください。
お問い合わせの前にFAQ・正誤表をご確認ください。すでに掲載済みの内容については個別回答が難しい場合があります。