しまぶーのIT大学

• 科学・IT

🏰 IT KINGDOM ( https://it-kingdom.com )
・React, TypeScript, ESLint, Prettierなど100本以上の講座（毎月6本を新しく追加）
・月に最低2回以上のライブコーディング講座
・月に最低2回以上のオンラインイベント
・毎日開催されるもくもく会（朝・昼・夜）
・毎日のITニュースシェア会
・質問できる環境、チーム開発など他にもたくさんのコンテンツ
フロントエンドエンジニアを目指す方や一緒に勉強する仲間を作りたい方にオススメです

もし入国された方はまずは説明会にお越しください！
奇数日の22時から開催しており、そこで私と雑談や相談ができます！
みなさんと一緒にお話できるのを楽しみにしております！😊✨

📝 動画の概要
今日はwebpackに関する講座です。ReactやNext.js、VueなどのモダンなWebフレームワークの裏側では必ず動いているツールです。モジュールバンドラーと呼ばれるもので、モジュール同士の依存関係を解決して1つのJSファイルにまとめたり、CommonJS形式のモジュールをブラウザが動く形に変換できます。今回はその2つを実践で取り扱っていますが、それ以外にもSassをCSSに変換する、画像ファイルを変換してサイズを減らす、開発環境を立ち上げて便利に開発できるようにするなど本当に色んなことができます。webpackをマスターして、Webフロントエンドにおける大事な概念をマスターしましょう。

前回の講座 → https://youtu.be/FQBU4_uONjI
　
📙 もくじ
0:00 webpackとは？
0:55 なぜwebpackの変換が必要か？
4:09 実践: 環境の紹介
5:06 実践: コードを記述
6:36 webpackのentry, outputを説明
8:12 webpackを実行
9:40 webpackを使わない場合
10:36 CommonJS形式のモジュールをブラウザで動かす
12:53 modeのdevelopmentとproductionを説明
15:01 まとめ

🔥この動画だけは見よ！
Babelの概念理解はモダンなWebフロントエンド開発への第一歩だ！
https://youtu.be/FQBU4_uONjI

【初心者脱却】npmでライブラリをインストールしよう！
https://youtu.be/izrTW0bO-hc

npm scriptsで簡単にコマンド実行！
GulpやGruntは私はもう使っていません！
https://youtu.be/rk-TGZ2Xsw4

👨‍💻 自己紹介
ヤフー株式会社でプログラマーとして働いていました！
現在は起業家として新規サービスを開発中です！
下記に興味がある方はチャンネル登録をおねがいします！
・IT業界、Web系、プログラミング講座
・リモートワーク、在宅勤務、副業
・スタートアップ、ベンチャー、経営者、社長

🌏 SNS
Twitter: https://twitter.com/shimabu_it
Instagram: https://www.instagram.com/shimabu_it

🏷️ タグ
#webpack #モジュール #モジュールバンドラー