webpack 最速入門 〜実務でも利用できるフロントエンド開発環境を構築する方法を最短で学ぶ〜

webpack の基礎（webpack が何をするツールでなぜ利用するのか）を学習します。

webpack を理解する上で重要な用語を学習します。

webpack の主要な機能であるローダーとプラグインの基礎を学習します。

webpackを利用することで、どのようなメリットが得られるのか学習します。

このセクションで行うこと（webpack を利用してやること）を解説しています。

package.json ファイルを生成する方法を学習します。

npm コマンドを利用して、webpack と jquery と velocity-animate をインストールする方法を学習します。また、package.json の dependencies と devDependencies の違いについても学習します。

webpack を npm scripts で実行する方法を学習します。また、なぜ npm scripts を利用するのかも学習します。

webpack の設定ファイルである webpack.config.js を作成し、設定を追加していきます。ただ設定を追加するだけではなく、追加する設定の内容も学習します。

モジュールを作成する方法を学習します。

エントリーポイントを作成し、モジュールを読み込んで利用する方法を学習します。

webpack を実行して出力されたファイルが正常に動作しているか確認します。

webpack-merge というプラグインを利用して、webpack の設定ファイルを開発用と本番用で分ける方法を学習します。

また、利用する webpack のモードによって、何が起きるのかについても学習します。

terser-webpack-plugin というプラグイン利用して、console.log を削除した本番用のファイルを出力する方法を学習します。

また、デフォルトで terser-webpack-plugin が実行される場所や、デフォルトで利用される terser-webpack-plugin のバージョンなどに関しても学習します。

ソースマップを生成する方法を学習します。

また、ソースマップを生成した場合と生成しない場合では、どのような違いがあるのかも確認してきます。

そして、どのソースマップを利用すれば良いのかも学習します。

clean-webpack-plugin というプラグインを利用して、出力先をクリーンアップしてからファイルを出力する方法を学習します。

html-webpack-plugin というプラグインを利用して、webpack から出力されたファイルを読み込んだ HTML を出力する方法を学習します。

開発用サーバーである webpack-dev-server を導入して利用する方法を学習します。

複数のエントリーポイントから複数のファイルを出力する方法を学習します。

どこを最適化すれば良いのかを理解するために、現時点で出力されているファイルの問題点を学習します。

splitChunksPlugin の仕組みやデフォルトの設定を学習しつつ、splitChunksPluginを利用して最適化したファイルを出力する方法を学習します。

splitChunksPlugin の様々な設定を利用して、複数の最適化したファイルを出力する方法を学習します。

ブラウザキャッシュ対策のために、出力するファイル名にハッシュを追加する方法を学習します。

なぜ Babel を利用するのか理解するために、まずは JavaScipt の仕様と JavaScript を利用した開発で発生する問題について学習をします。

Babel の基礎を学習します。

babel-loader（Babel を利用するローダー）で、ES2015（ES6）のコードをES5のコードに変換する方法を学習します。

ローダーの様々な書き方を学習します。

.browserslistrc という設定ファイルを追加して、ES2015 以降のコードを指定したブラウザで動作するコードに変換する方法を学習します。

ポリフィルのインストール方法と、指定したブラウザで必要なポリフィルのみを取り込む方法を学習します。

また、ポリフィルを全て取り込んでしまうとどのような問題が発生してしまうのかについても学習をします。

なぜ ESLint を利用するのか学習しつつ、eslint-loader（ESLint を利用するローダー）で JavaScriptのコードを検証する方法を学習します。

ESLint と Prettier というフォーマッタを併用して、JavaScript のコードを整形する方法を学習します。

eslint-loader 以外で ESLint を利用する方法を学習しつつ、eslint-loader の使い所に関して学習をします。

複数のローダー（sass-loader、css-loader、style-loader）を利用して Sass をバンドルする方法を学習します。

style-loader を利用することで発生する問題を解消するために、mini-css-extract-plugin でバンドルされる CSS を個別の CSS ファイルに抽出する方法を学習します。

post-css-loader（PostCSS を利用するローダー）と Autoprefixer という PostCSS のプラグインを利用して、ベンダープレフィックスを自動で追加する方法を学習します。

optimize-css-assets-webpack-plugin という cssnano に依存したプラグインを利用して、最適化した CSS を出力する方法を学習します。

cssnano を利用する必要性についても学習をします。

file-loader とローダーを利用して、画像を出力する方法を学習します。

html-webpack-plugin のテンプレートとなる HTML で画像を利用することで発生する問題と、html-loader を利用して問題を解消する方法を学習します。

image-webpack-loader というローダーを利用して画像を圧縮する方法を学習します。