webpack 最速入門 〜実務でも利用できるフロントエンド開発環境を構築する方法を最短で学ぶ〜
What you'll learn
- webpackを利用したフロントエンド開発環境の構築方法
- webpackの基礎(webpackが何をするツールなのか、webpackの主要な機能や用語に関して)
- webpack の様々な機能やプラグインなどを利用して開発環境を整える方法
- webpackを利用して最適化したファイルを出力する方法
- Babelとwebpackを連携して、JavaScriptのコードを様々なブラウザで動作するコードに変換する方法
- コードの品質を保つためにESLintとPrettierとwebpackを連携して、JavaScriptのコードを検証、整形する方法
- webpackでCSS(SassやPostCSSなど)を扱う方法
- webpackで画像を扱う方法
Requirements
- HTML/CSS/JavaScript の基礎知識
- コマンドライン: コマンドラインを起動したり、コマンドライン上でディレクトリを移動したり、ファイルを作成できる程度の知識があれば大丈夫です
- NodeJS: v12.18.1 をインストール済みであることを前提としています
- npm: v6.14.7 をインストール済みであることを前提としています
- ブラウザ : Google Chromeの最新版を推奨しています
- テキストエディタ: 本コースではVisual Studio Codeを利用しますが、お好みのものをご利用ください
Description
webpack(v4.43.0)の基礎から応用までを学習し、実用に足るフロントエンド開発環境を構築できるようになるコースです。
## コースの特徴
webpack の基礎から応用までを短時間でしっかり学べます。
実用に足るフロントエンド開発環境をハンズオン形式で構築していくため、このコースで身につけた知識を実務でそのまま活用できます。
1つのレクチャーの時間は約5~6分(最長でも10分程度)です。そのため、学習の集中力を維持しやすいですし、レクチャーの復習もし易くなっています。
レクチャー毎のサンプルコードをダウンロード可能です。学習の助けになるコメント付きのサンプルコードも提供します。
また、このコース内に出てくる以下に関しては、全て詳細を解説をしています。
webpack の様々の機能を利用するためにインストールするパッケージ
設定ファイル
設定ファイルに追加する設定
そのため、受講者の方が以下のような状態に陥ることはありません。
なぜこのパッケージを利用するのかがわからない
この設定ファイルが、何のための設定ファイルなのかがわからない
設定ファイルに書かれている設定の内容がわからない
## コースの詳細
「コース概要」というプレビュー動画で、このコースの以下の点について説明をしていますので、まずはそちらをご覧ください。
このコースで構築する開発環境について(何ができる開発環境なのか)
コース構成(このコースの各セクションで学習すること)
サンプルコードについて
このコースが想定している前提知識や前提条件
このコースの注意点
また、上記以外のプレビュー動画も用意していますので、それらもご覧になってから受講をするかどうかの判断をしていただければと思います。
Who this course is for:
- webpackを利用した開発を行いたい方
- 雰囲気で webpack を利用しており、webpack の理解を深めたい方
- 自分以外が書いた webpack の設定をコピペして利用しており、設定の内容がよくわかっていない方
- webpack を学習したり、公式ドキュメントを読んだが、難しくて挫折した方
Instructor
外資デジタルマーケティング企業のフロントエンドエンジニアとして、大規模サイトやWebアプリケーションの開発に携わっています。
自分は独学からのスタートでフロントエンドエンジニアになったため、自分と同じように独学からスタートする方や、学習でつまずいている方のサポートをできればと思い、Udemyをはじめました。
私自身がドキュメントや書籍を読んでつまずくことが多いため、わかりやすさを意識しながらコース作成をしています。