モジュールバンドラー webpack を1日で習得!フルスクラッチでインストールからカスタマイズまでの手順を理解する
4.5 (233 ratings)
Course Ratings are calculated from individual students’ ratings and a variety of other signals, like age of rating and reliability, to ensure that they reflect course quality fairly and accurately.
1,585 students enrolled

モジュールバンドラー webpack を1日で習得!フルスクラッチでインストールからカスタマイズまでの手順を理解する

React を題材にし各種形式のモジュールをローダー(babel/css/sass/html/eslint)やプラグイン(JS圧縮のカスタム/CSSのファイル分離と圧縮)でバンドル方法をハンズオンで解説!今回もGitHubにソース完全公開
4.5 (233 ratings)
Course Ratings are calculated from individual students’ ratings and a variety of other signals, like age of rating and reliability, to ensure that they reflect course quality fairly and accurately.
1,585 students enrolled
Last updated 2/2019
Japanese
Price: $199.99
30-Day Money-Back Guarantee
This course includes
  • 6 hours on-demand video
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
Training 5 or more people?

Get your team access to 4,000+ top Udemy courses anytime, anywhere.

Try Udemy for Business
What you'll learn
  • webpackの導入方法
  • webpackの設定方法
Course content
Expand all 17 lectures 06:04:09
+ 入門編
5 lectures 02:10:28
いきなり!動かしてwebpackの全体像を把握しよう - webpack適用前
42:40
開発環境と本番環境の違いについて
07:52
モジュールについて
25:19
+ ローダー(Loaders)編
3 lectures 01:06:10
css-loaderとstyle-loaderでスタイルを取り込もう
30:06
url-loaderで画像を取り込もう、 file-loaderで画像をファイルとして取り込もう
22:23
sass-loaderでSassのコードを取り込もう
13:41
+ プラグイン(Plugins)編
4 lectures 01:38:25
babel-loaderやhtml-webpack-pluginを利用しReact開発環境を構築しよう
37:41
mini-css-extract-plugin でスタイルをcssファイルに分離しよう
21:55
uglifyjs-webpack-plugin でconsole.log関数の自動削除をしよう
23:41
optimize-css-assets-webpack-plugin でスタイルシートを圧縮しよう
15:08
Requirements
  • GitHubのアカウント・・・公開中のソースコードをforkする場合等に必要です。
  • gitの基礎知識及び基本操作・・・公開中のソースコードの取得にあると便利です。
  • ブラウザ・・・Google Chromeの最新版が推奨です。
  • テキストエディタ・・・Visual Studio Code、Atom、vim等お好みのものをお使いください。
  • Node・・・LTS (Long Term Support)最新版が推奨です。
  • 【重要】動画で紹介する手順の通りに行い期待通りの結果にならない場合でも、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の導入方法及び設定方法ついて学習したい方