書籍詳細（速習 webpack）

速習 webpack 書影

速習 webpack

ドメイン駆動設計 設計 javascript typescript sass
サポート終了
著者山田祥寛
出版社WINGSプロジェクト
価格500円（税込）
判型Kindle版・4色
ページ数127ページ
発売日2018年4月27日
シリーズ 速習（QUICK MASTER - WINGS）
対象レベル初級
Amazonで購入
B!

改訂版が刊行されています。詳細はこちらをご覧ください。

サクッと学べる。webpackの解説書。

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

更新履歴

  • 正誤訂正：2018年5月8日 更新

目次

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

正誤表

該当頁 該当箇所 修正刷
訂正箇所 訂正事項 更新日
p.- Part4 ［リスト］src/index.js（styleプロジェクト） -
let body = document.getElementByTagNames('body')[0]; let body = document.getElementsByTagName('body')[0]; 2018/05/07
p.- Part4 ［リスト］webpack.config.js（style-linkプロジェクト） 下の解説文 -
extraメソッドの引数（useパラメーター）に extractメソッドの引数（useパラメーター）に 2018/05/08

FAQ

現在、FAQはありません。

お問い合わせ

書籍に関するご質問や誤りのご報告、ご意見・ご感想などをお寄せください。

Powered by メールフォーム 『オレンジフォーム』