本コースは、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の導入方法及び設定方法ついて学習したい方