Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
pitch loaderについて
Search
rchaser53
March 09, 2018
Programming
1
480
pitch loaderについて
rchaser53
March 09, 2018
Tweet
Share
More Decks by rchaser53
See All by rchaser53
LLVM IR入門
rchaser53
4
2.3k
Rustからwasmを生成してみた話
rchaser53
1
690
Base64 VLQ概要
rchaser53
2
1.3k
sourcemap規格概要
rchaser53
1
1k
TypeScript+React入門
rchaser53
1
750
Other Decks in Programming
See All in Programming
[PyCon Korea 2024 Keynote] 커뮤니티와 파이썬, 그리고 우리
beomi
0
110
推し活としてのrails new/oshikatsu_ha_iizo
sakahukamaki
3
1.7k
Webの技術スタックで マルチプラットフォームアプリ開発を可能にするElixirDesktopの紹介
thehaigo
2
920
Go言語でターミナルフレンドリーなAIコマンド、afaを作った/fukuokago20_afa
monochromegane
2
140
役立つログに取り組もう
irof
27
8.7k
VR HMDとしてのVision Pro+ゲーム開発について
yasei_no_otoko
0
100
生成 AI を活用した toitta 切片分類機能の裏側 / Inside toitta's AI-Based Factoid Clustering
pokutuna
0
580
Modern Angular: Renovation for Your Applications
manfredsteyer
PRO
0
210
Outline View in SwiftUI
1024jp
1
160
CSC305 Lecture 13
javiergs
PRO
0
130
カラム追加で増えるActiveRecordのメモリサイズ イメージできますか?
asayamakk
4
1.6k
リリース8年目のサービスの1800個のERBファイルをViewComponentに移行した方法とその結果
katty0324
5
3.6k
Featured
See All Featured
Ruby is Unlike a Banana
tanoku
96
11k
Reflections from 52 weeks, 52 projects
jeffersonlam
346
20k
Thoughts on Productivity
jonyablonski
67
4.3k
Scaling GitHub
holman
458
140k
GraphQLの誤解/rethinking-graphql
sonatard
66
9.9k
BBQ
matthewcrist
85
9.3k
Java REST API Framework Comparison - PWX 2021
mraible
PRO
28
7.9k
Side Projects
sachag
452
42k
Adopting Sorbet at Scale
ufuk
73
9k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
41
2.1k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
126
18k
Code Review Best Practice
trishagee
64
17k
Transcript
webpack のpitch loader について @rchaser53
webpack のpitch loader についてです cache-loader の調査中に気になったの調べました 自作、バグ修正の足がかりに役立てば幸いです
loader とは? いつものアレ(babel-loader とかcss-loader とか) module のソースコードを変換するもの 同期/ 非同期の両方に対応している loader
は任意のファイルを出力できる(file-loader とか)
loader の処理順 { test: '/.js$/', use: [ 'abc-loader', 'def-loader' ]
} 1. def-loader 2. abc-loader ではない正確にはpitch loader が先に実行される
pitch loader とは default loader の前に実行されるoptional なloader 値を返すとdefault loader まで処理が省略される
この時点ではまだソースは読み込まれていない
default loader の前に実行されるoptional なloader // webpack.config.js { test: '/.js$/', use:
[ 'abc-loader', 'def-loader' ] } 以下が正しい処理順 1. abc-loader -- pitch 2. def-loader -- pitch 3. (read the sources) 4. def-loader -- default 5. abc-loader -- default
default loader の前に実行されるoptional なloader dom のevent bubling からデザインされたもの
値を返すとdefault loader まで処理が省略される module.exports = { pitch: function() { //
値 返 default 処理 省略 // 返 値 String Buffer return 'something' // 非同期 // const callback = this.async(); // callback(null, 'something'); // return 何 返 (undefind) 次 loader 処理 移 } default: function(sources) { return sources[0] // Array 来 単純 return } }
値を返すとdefault loader まで処理が省略される 例1 abc-loader.pitch return "abc" def-loader.pitch ( 省略)
def-loader.loader ( 省略) abc-loader.loader ( 省略)
値を返すとdefault loader まで処理が省略される 例2 abc-loader pitch return def-loader pitch return
"somethingA" def-loader default ( 省略) abc-loader default return "somethingB"
値を返すとdefault loader まで処理が省略される 使用例 cache-loader 1. pitch loader でcache と依存ファイルのmtime
を比較 2. 差異がない場合はcache を読みこみreturn 3. defalult loader でそれまでの生成物と依存ファイルの path 、mtime からcache を作成
値を返すとdefault loader まで処理が省略される mtime … 最終変更時刻 (modify time) 最後にファイルを変更した時刻のこと 正確にはファイルにwrite(2)
、またはtruncate(2) した場合 に変更されるもの
この時点ではまだソースは読み込まれていない path は取得できるので取得はできる( 非推奨) loader-utils やschema-utils は使用できるのでoption など は取得できる 第3
引数経由で他のloader に値を渡すことはできる
この時点ではまだソースは読み込まれていない 正直cache-loader くらいしか第3 引数を使っている loader を見かけない cache の依存情報やfile がコンパイル中に変更されてい ないか確認するために使用している
そもそもpitch loader 自体ほとんど使われてない(script- loader, style-loader とか)
まとめ まとめ 使う機会はあるのか? webpack に対してはないかもしれない しかしフェイズを2 つに分けて、片方ではcache 管理な どを行うという設計の仕方は使えそう まぁその時楽しめれば良いよね
が作成できた! awesome-prettier-loader
参考リンク 公式ページ( かなり充実している) Documentation for pitch vs normal loader isn't
very clear UNIX/Linux の部屋 用語集: タイムスタンプ cache-loader
ご静聴ありがとうございました! ご静聴ありがとうございました!