Recommandé
Contenu connexe
Tendances
Tendances (20)
Similaire à なぜ初心者は webpackが解らないのか？- Why can’t you understand the webpack? -
Similaire à なぜ初心者は webpackが解らないのか？- Why can’t you understand the webpack? - (20)
なぜ初心者は webpackが解らないのか？- Why can’t you understand the webpack? -
- 1. なぜ初心者は webpackが解らないのか？ - Why can’t you understand the webpack? - 2018/06/20 Fukuoka.js #4 LT
- 2. ● 井関 健人(@take2webservice) ● フリーランスのWEB系エンジニア ● PHPとかJavascriptとかRubyとか触ってます ● 新しい技術を1dayで教える講師とかやってます ● LaravelとかGitとかwebpackとかVueとかDockerとか… ● 今回は宣伝も兼ねて、webpack講座の前半部分を切り取ってきました 自己紹介
- 4. webpackの具体的な用途 ● pug(Jade)やHAML、EJSといったテンプレートエンジンのコンパイル ● SASSなどのCSSプリプロセッサのプリコンパイル ● TypeScriptなどのAltJSのトランスパイル ● Linterを用いた、Javascriptの構文チェック ● AngularやReact、Vue(Vue-cli)といったJSフレームワークの実行 ...etc
- 5. 初心者「できること多すぎて解らん…」 ／＼ テンプレートエンジンって何だよ！！ ／ ／| CSSプリプロセッサって何だよ！！ ∴＼／ ／ BabelとかAltJSって何だよ！！ ゜∵|／ Linterって何だよ！！ (ノ･ω･)ノ そもそもフレームワークって何だよ！！ / / ￣￣￣￣￣￣￣￣￣
- 6. ● Javascriptの静的モジュールバンドラー ● 依存関係のあるJavascriptのモジュールを取得し、それらのモジュールを元 に静的ファイルを生成する。 ● webpack.config.jsに設定を記述しコマンドラインから実行する。 ● 利用にはNode.jsの実行環境が必要。 ● ローダやプラグインという機能で、ファイルをバンドルする時にカスタムタス クを実行できる。 （参考：https://en.wikipedia.org/wiki/Webpack） 改めて、webpackとはなにか？（from wikipedia）
- 8. さっきの具体的な用途にほぼ触れられていない…だと？ ● pug(Jade)やHAML、EJSといったテンプレートエンジンのコンパイル ● SASSなどのCSSプリプロセッサのプリコンパイル ● TypeScriptなどのAltJSやBabelを用いたJavascriptへのトランスパイル ● Linterを用いた、Javascriptの構文チェック ● AngularやVue.js(Vue-cli)といったフレームワークの実行 ...etc
- 9. さっきの具体的な用途はほぼ全て「ローダーとプラグインでできる内容」 ● Javascriptの静的モジュールバンドラー ● 依存関係のあるJavascriptのモジュールを取得し、それらのモジュールを元 に静的ファイルを生成する。 ● webpack.config.jsに設定を記述しコマンドラインから実行する。 ● 利用にはNode.jsの実行環境が必要。 ● ローダやプラグインという機能で、ファイルをバンドルする時にカスタムタス クを実行できる。 （参考：https://en.wikipedia.org/wiki/Webpack） ● pug(Jade)やHAML、EJSといったテンプレートエンジンのコンパイル ● SASSなどのCSSプリプロセッサのプリコンパイル ● TypeScriptなどのAltJSやBabelを用いたJavascriptへのトランスパイル ● AngularやReact、Vue(Vue-cli)といったJSフレームワークの実行 ● Linterを用いた、Javascriptの構文チェック
- 11. ● Javascriptの静的モジュールバンドラー ● 依存関係のあるJavascriptのモジュールを取得し、それらのモジュールを元 に静的ファイルを生成する。 ● webpack.config.jsに設定を記述しコマンドラインから実行する。 ● 利用にはNode.jsの実行環境が必要。 ● ローダやプラグインという機能で、ファイルをバンドルする時にカスタムタス クを実行できる。 （参考：https://en.wikipedia.org/wiki/Webpack） webpackとはなにか？（from wikipedia）
- 13. //shout.js hoge.shout(); fuga.shout(); //hoge.js var hoge = {} hoge.shout = function(){ console.log("hoge"); } 読み込み順を気にする必要があったり… 分割しないと、ファイルのどこで何をしてるか解りづらかったり… でも、分割すると変数名上書きしそうで怖かったり… 昔のJavascript開発 //index.html <script src="hoge.js"> <script src="fuga.js"> <script src="shout.js"> //fuga.js var fuga = {} fuga.shout = function(){ console.log("fuga"); }
- 15. index.js いい感じに1ファイルにまとめられる。 //shout.js const hoge = require("hoge"); const fuga = require("fuga"); hoge.shout(); fuga.shout(); モジュールバンドラー登場により変化したJavascript開発 //hoge.js const hoge = {} hoge.shout = function(){ console.log("hoge"); } module.exports = hgoe; //fuga.js const fuga = {} fuga.shout = function(){ console.log("fuga"); } module.exports = fuga; webpackなどのモジュールバンドラーで、 複数のjsファイルをまとめる。 htmlには、このファイルを 読み込むだけ。
- 18. Gulpとは gulp is a toolkit for automating painful or time-consuming tasks in your development workflow, so you can stop messing around and build something. <訳> gulpは開発ワークフローで苦労したり時間のかかるタスクを自動化するための ツールキットです。
- 19. Gulpとは - gulpはタスクランナーと呼ばれるツールです - JSの圧縮、Sassのコンパイル、画像の圧縮など - Web制作において時間のかかるタスクを自動化するためのもの - Gruntと違って非同期処理なので早い
- 21. ● Entry（エントリー） ● Output（アウトプット） ● Loader（ローダー） ● Plugins（プラグイン） webpackの4つの基本要素
- 26. webpackを図にすると cssやテンプレートエ ンジンを読み込みた い？ js以外の読み込む方 法(Loader)を教えて くれたら読み込む よ！ javascriptのファイル をまとめたい？ 最初に読み込むjs ファイルを教えくれれ ば、中で呼んでる javascriptを読み込 むよ！ jsとは一緒にせず、 cssやhtmlの出力を したり、ファイルを圧 縮したい？ まとめる以外の処理 方法（Plugin）も教え てくれたらやっとく よ！ 読み込んだ javascriptをまとめて 出力するときの出力 先と、出力方法を教 えて！ まとめて置いとくよ！ webpack .config.js ユーザー この設定でjsファイ ルをまとめて下さ い！ js js sass pug js css html bundle.js OutputEntry Loaders Plugins
- 28. おわり おわり