webpackは、複数のファイルを1つにまとめて出力してくれるモジュールバンドラでフロントエンド開発の現場で利用されます。
主な用途は、JavaScriptファイルをバンドル(複数のファイルをまとめる)ですが、SASSのコンパイルや画像の圧縮などGulpで行っていたこともwebpackでできるため、移行する人も多いです。
そんなwebpackですが、独学で学ぶ際に参考となる書籍や動画が少ないです。そこで、こちらの記事ではwebpackの学習におすすめの動画コンテンツについてご紹介します。
Amazon Kindle Unlimited
先輩くんAmazon Kindle Unlimitedに登録すると、月額980円で読み放題だからオススメだよ！
後輩ちゃん初回30日間は無料だから、まだ登録したことのない人はぜひ試してみてね！
変数名/関数名にもう悩まない！
- 美しいコードが書けるが自然と書けるようになる
- 他の開発者が理解しやすいコードになる
ポチップ
おすすめ動画コンテンツ
私がおすすめする動画コンテンツはUdemyです。
実際にUdemyを利用して実感した魅力的なポイントは、以下の通りです。
- 新規学習者向けのセールで格安でコースを購入することができる
- コース購入から30日以内であれば、返金することができる
- 分からない箇所があれば、コメントで質問することができる
- プロのエンジニアが教えてくれるため、実践的な講義を受けられる
後輩ちゃんUdemyすごい。。
先輩くん僕も新しい技術を学びたい時には、必ずと言っていいほど利用しているよ！
モジュールバンドラー webpack を1日で習得！フルスクラッチでインストールからカスタマイズまでを理解する
| 作成者 | はむさん |
| 学習時間 | 6.5時間 |
- webpackの導入方法
- webpackの設定方法
- はじめに
- 入門編
- ローダー(Loaders)編
- プラグイン(Plugins)編
- 落穂拾い編
- はむさんの落穂拾い
- ボーナスセクション
9月からHTML、CSSを学び始めた初学者です。そんな私でも大変わかりやすくつまづく事無く進めることができ、成長を実感できて達成感が非常に高い良い教材でした。次はreactに挑戦してみようと思います。ありがとうございました。
引用元：Udemy
とても丁寧な解説でわかりやすかったです。予期しないエラーが出た場合の対応はどのようにしているのか、ドキュメントはどのように追って実装しているのかを動画に残してくださっており、たいへん参考になります。
引用元：Udemy
Webpackでウェブサイト制作のHTML/CSS/JSコーディングを一気に効率化する実践講座 (Mac / Win)
| 作成者 | Shunsuke Sawada |
| 学習時間 | 8時間 |
- Webpackを使って効率的にウェブサイトを制作する方法
- Pug / Sass / ES6 等を使用したビルド方法
- React / Vue / Typescriptをウェブサイトに取り込む方法
- 画像ファイル圧縮の自動化
- GitとGithubの使い方
- GithubとNetlifyを連携させた自動リリースの手順
- Webpack講座の概要
- GitとGithubを学ぶ
- Webpack入門
- Webpackの設定ファイルとLoader
- Webpackのプラグイン
- ファイル構成を整える
- 画像の読み込み
- 効率的なHTMLの制作方法
- ローカルサーバーを利用した開発
- 効率的なCSSの制作方法
- ES6
- コードのデバック方法
- 画像の最適化
- Reactのビルド設定
- Vueのビルド設定
- TypeScriptのビルド設定
- プロジェクトの整理整頓
- ウェブサイトのリリース
webpackの理解が深まりました。
一つ一つのパッケージが動画毎に区切られていて、どういった役割があるかも理解できました。
また、質問対応も丁寧に回答いただけて感謝しています。
ありがとうございました！
引用元：Udemy
非常に丁寧でわかりやすく説明されていました。
動画収録時にはなかったWebpack5の補足情報も追加されているなど細やかな内容でした。
Webpackやgitの使い方ももちろんですが、実務における効率化を意識した考え方や整理の仕方など、かなり勉強になる教材でした
引用元：Udemy
webpack 最速入門 〜実務でも利用できるフロントエンド開発環境を構築する方法を最短で学ぶ〜
| 作成者 | shohei kadooka (soarflat) |
| 学習時間 | 3.5時間 |
- webpackを利用したフロントエンド開発環境の構築方法
- webpackの基礎（webpackが何をするツールなのか、webpackの主要な機能や用語に関して）
- webpackの様々な機能やプラグインなどを利用して開発環境を整える方法
- webpackを利用して最適化したファイルを出力する方法
- Babelとwebpackを連携して、JavaScriptのコードを様々なブラウザで動作するコードに変換する方法
- コードの品質を保つためにESLintとPrettierとwebpackを連携して、JavaScriptのコードを検証、整形する方法
- webpackでCSS（SassやPostCSSなど）を扱う方法
- webpackで画像を扱う方法
- はじめに
- webpackの基礎を学習する
- webpackを利用してみる
- webpackの様々な機能やプラグインなどを利用して開発環境を整える
- 最適化
- BabelでJavaScriptのコードを様々なブラウザで動作するコードに変換する
- ESLintとPrettierでJavaScriptのコードを検証、整形をしてコードの品質を保つ
- webpackでCSSを扱う
- webpackで画像を扱う
githubに動画ごとのソースが用意されており、利用するモジュールもバージョン指定しているため、動画の通り再現できストレスなく進められました。
コメント付きのソースがいただけた点もとても役に立ちました。わからないことがあった場合に復習できて頼もしいです。
引用元：Udemy
実務で使えるwebpackの基本技術を効率的に理解する事が出来ました！webpackを使う上での問題点やその解決法、応用のケースや、用途（チームor個人開発）に合わせた使い方も説明に含まれており、webpack入門者として非常に参考になりました。
引用元：Udemy
まとめ
今回は、webpackの学習におすすめの動画コンテンツについてご紹介しました。
webpackを習得することで、依存関係のあるモジュールを解決することやファイルを1つにまとめリクエスト回数を減らすことができるようになり、開発効率のアップとシステム性能のアップをさせることができますので、頑張って習得しましょう！
