webpack 最速入門 〜実務でも利用できるフロントエンド開発環境を構築する方法を最短で学ぶ〜
webpack(v4.43.0)の基礎から応用までをサクッと学べるコースです。実用に足るフロントエンド開発環境をハンズオン形式で構築していくため、このコースで身につけた知識を実務でも活用できます。コース内で利用しているコードはすべて公開。
What you will learn
webpackを利用したフロントエンド開発環境の構築方法
webpackの基礎(webpackが何をするツールなのか、webpackの主要な機能や用語に関して)
webpack の様々な機能やプラグインなどを利用して開発環境を整える方法
webpackを利用して最適化したファイルを出力する方法
Babelとwebpackを連携して、JavaScriptのコードを様々なブラウザで動作するコードに変換する方法
コードの品質を保つためにESLintとPrettierとwebpackを連携して、JavaScriptのコードを検証、整形する方法
webpackでCSS(SassやPostCSSなど)を扱う方法
webpackで画像を扱う方法
Why take this course?
webpack(v4.43.0)の基礎から応用までを学習し、実用に足るフロントエンド開発環境を構築できるようになるコースです。
## コースの特徴
webpack の基礎から応用までを短時間でしっかり学べます。
実用に足るフロントエンド開発環境をハンズオン形式で構築していくため、このコースで身につけた知識を実務でそのまま活用できます。
1つのレクチャーの時間は約5~6分(最長でも10分程度)です。そのため、学習の集中力を維持しやすいですし、レクチャーの復習もし易くなっています。
レクチャー毎のサンプルコードをダウンロード可能です。学習の助けになるコメント付きのサンプルコードも提供します。
また、このコース内に出てくる以下に関しては、全て詳細を解説をしています。
webpack の様々の機能を利用するためにインストールするパッケージ
設定ファイル
設定ファイルに追加する設定
そのため、受講者の方が以下のような状態に陥ることはありません。
なぜこのパッケージを利用するのかがわからない
この設定ファイルが、何のための設定ファイルなのかがわからない
設定ファイルに書かれている設定の内容がわからない
## コースの詳細
「コース概要」というプレビュー動画で、このコースの以下の点について説明をしていますので、まずはそちらをご覧ください。
このコースで構築する開発環境について(何ができる開発環境なのか)
コース構成(このコースの各セクションで学習すること)
サンプルコードについて
このコースが想定している前提知識や前提条件
このコースの注意点
また、上記以外のプレビュー動画も用意していますので、それらもご覧になってから受講をするかどうかの判断をしていただければと思います。