Udemy
    •  
    •  
    •  
    •  
    •  
    •  
    •  
    •  
Turn what you know into an opportunity and reach millions around the world.
Learn More
Your cart is empty.
Keep shopping
モジュールバンドラー webpack を1日で習得!フルスクラッチでインストールからカスタマイズまでを理解する
Rating: 4.4 out of 5(389 ratings)
2,760 students
Last updated 5/2026
Japanese

What you'll learn

  • webpackの導入方法
  • webpackの設定方法

Course content

7 sections20 lectures6h 20m total length
  • 講師自己紹介、webpackの紹介、等8:48
  • 本コースの概要のご説明7:54
  • GitHubのリポジトリなど10:32
  • 本コースで使用するNodeのバージョンはv10.15.0です0:21

Requirements

  • GitHubのアカウント・・・公開中のソースコードをforkする場合等に必要です。
  • gitの基礎知識及び基本操作・・・公開中のソースコードの取得にあると便利です。
  • ブラウザ・・・Google Chromeの最新版が推奨です。
  • テキストエディタ・・・Visual Studio Code、Atom、vim等お好みのものをお使いください。
  • Node・・・本コースの推奨バージョンはv10.15.0です。異なるバージョンのNodeを使用した場合は挙動が異なる場合がありますのでご注意ください
  • 【重要】動画で紹介する手順の通りに行い期待通りの結果にならない場合でも、Q&Aを利用し、質問し解決しようとする意欲や積極性が必要です

Description

Udemyへようこそ!

Udemyのプログラミングおじさん、はむです。

本コースは、Reactを題材にして、各種形式のモジュールをローダー(babel/css/sass/html/eslint)やプラグイン(JS圧縮のカスタム/CSSのファイル分離と圧縮)などを駆使してwebpackでバンドルする方法をハンズオン形式で解説します。そして、修了する頃には、ご自身でwebpackの設定が自在にできるようになるというのがゴールとなります。

コースで書いたコードは、GitHubに完全公開しており、動作確認の取れているコードを配布していますので、 特に、webpack.config.jsの内容を見ただけでアレルギーが出てしまうような方には 是非本コースでwebpackの設定に慣れていただいて、 今後はご自身のプロジェクトで率先して設定の方を進められるようになって頂きたいという情熱で本コースを作成しました。

本コースは、 入門編、ローダー編、プラグイン編、そして、落ち穂拾い編の4つのセクションで構成されています。

入門編では、webpackが一体どういうものなのかについての大まかな概念を学習します。入門とはいっても、実際にいきなりコードを書いていただきますが、かなり業務に活用できるような実践的な内容にしています。

webpackの設定自体は難しいことはあまりなくて、どちらかというと、この後に続く、 ローダー編、とプラグイン編で 細かな設定を行うことが、いわゆるwebpackの設定だと思われがちなんですけれども、 実は、本コースの入門編でしっかり概念を身に付けることができれば ほぼほぼwebpackについての本質は理解できたも同然ということになります。 あとは、以降のローダーとかプラグインといった webpackに関する枝葉の機能を どれだけ使いこなすことができるのかというというところが 実際の現場で問われる課題になってきますが、 この部分はあくまで、扱っている案件、プロジェクトの要件に沿って 適宜、選んでいく部分になりますが、 本コースではいわゆるフロントエンドアプリケーションとして 概ね導入されるであろう有名なローダーやプラグインについて紹介していますので 実際に動画を通じて、なるほど、こういう手順で導入していくんだな! っていう感じで、流れを掴んでいただければ良いかなと思います。

最後に、落ち穂拾い編です。 これは、いわば、応用編のようなセクションになります。 ローダーやプラグインには分類されない、ソースマップの導入のこととか、あるいは、 単純に1つのローダーやプラグインを導入したら終わり!というものではなくて、 ローダーとプラグインを両方を複雑に絡めて、導入することが必要となるeslintの導入などを 扱っているセクションになります。 といった、全部で、約6時間、つまり、1日で習得できるコースとなります。

いくつかプレビュー動画をご覧いただけますので是非ご覧になってください。動画の内容はもちろん、僕のレクチャースタイルなどをご確認いただけますので、是非ご覧になってください。プレビューを観るのはタダですので!

では、コースの中でお会いできるのを楽しみにしています!

Dive into Hacking!

はむ

Who this course is for:

  • webpackの導入方法及び設定方法ついて学習したい方