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
Webpacker の webpack.config.js を見る…つもりだった話/Toyam...
Search
muryoimpl
December 08, 2018
Technology
0
740
Webpacker の webpack.config.js を見る…つもりだった話/Toyamarb#35LightningTalk_WebpackerConfigShower
Toyama.rb#35 年末LT大会 でしたLTスライド。
Webpacker 内部にある webpack.config.js を出力したかったが、見え過ぎちゃって困った話。
muryoimpl
December 08, 2018
Tweet
Share
More Decks by muryoimpl
See All by muryoimpl
Kanazawa.rb LT大会用/kzlt コマンドの説明 2024/01版
muryoimpl
0
1.6k
kzltコマンドの新たなソリューションについて
muryoimpl
0
1.6k
俺とTODOアプリ~Linearの変~
muryoimpl
0
1.5k
POSIX文字クラスでの躓き
muryoimpl
0
1.5k
/kzlt コマンドとは
muryoimpl
0
600
meetup.kzrb.org の更新を考える 事前激闘編
muryoimpl
0
1.1k
meetup.kzrb.org の更新を 考える ゆるふわ編
muryoimpl
0
1.1k
最近のデスク周りの diff / kzrb meetup#108-2
muryoimpl
0
19
ショートカットキーのショートカットキー / shortcut keys of shortcut keys
muryoimpl
0
84
Other Decks in Technology
See All in Technology
暴カワでビデオシンセサイザーを導入する技術
yuchi
2
130
Brakeman を欺く - Kashiwa.rb #4
kozy4324
1
100
WSUSが非推奨に!? Windowsの更新管理を改めて勉強する!
ebibibi
0
580
APIs for AI: Have we failed?
zdne
0
130
Demystifying Vite Internals
nozomuikuta
3
760
自然言語処理を役立てるのはなぜ難しいのか
pfn
PRO
17
4.5k
管理画面とユーザー機能の調和を取り戻す!~クエリパフォーマンス改善の成功物語~ / Restore harmony between administrative and user functions!
minisera
1
320
次は君だ。~Japan AWS Jr. Champions 受賞までの奇跡~
fukuchiiinu
0
120
今日から始める技術的負債の解消
leveragestech
3
460
マルチテナントのサービスインフラに大きなテナントを受け入れるまで
7474
0
790
さくっと実践!Postmanを活用した高品質で持続可能なAPI管理
yokawasa
5
360
Amazon ECS & AWS Fargate 今昔物語 / past and present stories of Amazon ECS and AWS Fargate
iselegant
19
4.1k
Featured
See All Featured
Rails Girls Zürich Keynote
gr2m
93
13k
Producing Creativity
orderedlist
PRO
341
39k
Building Flexible Design Systems
yeseniaperezcruz
327
38k
Fireside Chat
paigeccino
32
3k
A Modern Web Designer's Workflow
chriscoyier
692
190k
The Pragmatic Product Professional
lauravandoore
31
6.2k
Product Roadmaps are Hard
iamctodd
PRO
48
10k
Why Our Code Smells
bkeepers
PRO
334
57k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
159
15k
Building a Scalable Design System with Sketch
lauravandoore
459
33k
For a Future-Friendly Web
brad_frost
174
9.4k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
5
130
Transcript
Webpacker の Webpacker の webpack.config.js を見る… webpack.config.js を見る… つもりだった話 2018-12-08
Toyama.rb #35 年末LT 大会 @muryoimpl
名前: 無量井 健( むりょうい けん) @kunitoo の同僚で、金沢でフルリモート勤務中 Toyama.rb は 2
回目の参加 です 最近は *.rb というより、*.js を書くことが多い 自己紹介 自己紹介
Webpacker の Webpacker の webpack.config.js を見る… webpack.config.js を見る… つもりだった話
None
Ruby on Rails に組み込める gem sprockets と連携しつつ、webpack を使うことができる Rails とともにモダンな
JavaScript libraries/framework を使 って開発ができるようになる Webpacker とは Webpacker とは
Ruby on Rails が提供してくれているいい感じのデフォルト値 がどんなものなのかわかりにくい 内部で npm package を経由しているので Ruby
だけ見てもわ からない プログラマブルな書かれ方をしているので、脳内で組み立てな いと全体がわかりにくい Webpacker の気になるところ Webpacker の気になるところ
なので、 なので、 さくっと見れるものが さくっと見れるものが 欲しくなるじゃないですか 欲しくなるじゃないですか
なので、やってみた なので、やってみた
webpacker_config_shower webpacker_config_shower という gem を作りました という gem を作りました https://rubygems.org/gems/webpacker_config_shower https://rubygems.org/gems/webpacker_config_shower
結論 結論
見えすぎて困った 見えすぎて困った
$ bin/rails webpacker:config:show { "output": { ... "publicPath": "/packs/", "pathinfo":
true }, "resolve": { "extensions": [ ... ] }, ... "entry": { ... }, ... "plugins": [ { "keys": [ "GREP_COLOR", "CLOUDSDK_PYTHON", "ZPLUG_CACHE_DIR", ... "BUNDLER_ORIG_BUNDLE_BIN_PATH", "BUNDLER_ORIG_RB_USER_INSTALL",
webpack の plugin 部分などのオブジェクトが記載されている 箇所が 展開されて 表示されてしまう… 設定がclass として表現されているから?そのまま表示は厳し い?
これはおとなしくwebpacker のpackage/environments を 見るしかないのか… おわかりだろうか… おわかりだろうか…
https://github.com/muryoimpl/webpacker_config_shower rails plugin new webpacker_config_shower railtie を Rails::Engine を継承したものに変更(Rake ファイル
ロードのため) webapcker で内部コマンドを実行する Runner を継承して node コマンドを実行する Gem としてやったこと Gem としてやったこと
require 'webpacker' require 'webpacker/runner' require 'open3' module WebpackerConfigShower class Runner
< ::Webpacker::Runner def self.run(argv) ENV["NODE_ENV"] ||= Rails.env super end def run cmd = [ "node", "-e", *[ "const conf = require('#{@webpack_config}')", "const { format } = require('util')", "console.log(format('%j', conf))", ].join(';') ] Dir.chdir(@app_path) do _, stdout, _ = *Open3.popen3(*cmd) puts JSON.pretty_generate(JSON.parse(stdout.read)) end end