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
Webpack 3 触ってみた
Search
puku0x
July 19, 2017
Technology
0
410
Webpack 3 触ってみた
puku0x
July 19, 2017
Tweet
Share
More Decks by puku0x
See All by puku0x
ファインディにおけるフロントエンド技術選定の歴史
puku0x
2
210
ファインディでのGitHub Actions活用事例
puku0x
9
3.3k
Findyの開発生産性向上への取り組み ~Findyフロントエンドの場合~
puku0x
0
430
Findyの開発生産性を上げるためにやったこと
puku0x
1
590
Angularコーディングスタイルガイドはいいぞ
puku0x
1
330
Nx CloudでCIを爆速にした話
puku0x
0
850
Findyのフロントエンド設計刷新を通して得られた技術的負債との向き合い方
puku0x
1
1.8k
最高の開発体験を目指して 〜Findyのフロントエンド設計刷新〜
puku0x
0
850
VSCode GraphQL + GraphQL Code Generator による快適なフロントエンド開発
puku0x
0
2.8k
Other Decks in Technology
See All in Technology
LangChain Interrupt & LangChain Ambassadors meetingレポート
os1ma
2
320
Flutter向けPDFビューア、pdfrxのpdfium WASM対応について
espresso3389
0
130
United airlines®️ USA Contact Numbers: Complete 2025 Support Guide
unitedflyhelp
0
310
生成AI開発案件におけるClineの業務活用事例とTips
shinya337
0
260
20250707-AI活用の個人差を埋めるチームづくり
shnjtk
4
3.9k
事業成長の裏側:エンジニア組織と開発生産性の進化 / 20250703 Rinto Ikenoue
shift_evolve
PRO
3
22k
スタートアップに選択肢を 〜生成AIを活用したセカンダリー事業への挑戦〜
nstock
0
210
DBのスキルで生き残る技術 - AI時代におけるテーブル設計の勘所
soudai
PRO
50
20k
Operating Operator
shhnjk
1
590
Claude Code に プロジェクト管理やらせたみた
unson
6
4.2k
american aa airlines®️ USA Contact Numbers: Complete 2025 Support Guide
aaguide
0
210
KubeCon + CloudNativeCon Japan 2025 Recap
ren510dev
1
390
Featured
See All Featured
Code Review Best Practice
trishagee
69
18k
Fireside Chat
paigeccino
37
3.5k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
251
21k
The Language of Interfaces
destraynor
158
25k
Making Projects Easy
brettharned
116
6.3k
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
jQuery: Nuts, Bolts and Bling
dougneiner
63
7.8k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
126
53k
Agile that works and the tools we love
rasmusluckow
329
21k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
32
2.4k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
233
17k
Transcript
Webpack 3 ৮ͬͯΈͨ ԶͷΛฉ͚ʂʂLTେձ #4 2017/07/19
(ג)Ϩεί ΤϯδχΞ ng-fukuokaද ৽ٓါ !QVLVY
Webpack
Webpack • ϑϩϯτΤϯυपΓͷϏϧυπʔϧ • HTML/CSS/JS → શ෦JSʹม • bundle.js ʹ·ͱΊΔʢׂՄʣ
V3 ϦϦʔεʂ https://medium.com/webpack/webpack-3-official-release-15fd2dd8f07b V2ϦϦʔε͔Βܦͬͯͳ͍ΜͰ͚͢Ͳ…
V3ͰԿ͕มΘͬͨʁ
Scope Hoisting • ModuleConcatenationPluginͷՃ • Ϟδϡʔϧผʹ (function(){}) ͯͨ͠ ෦͕·ͱΊΒΕΔ •
࣮ߦ࣌ؒͱϑΝΠϧ༰ྔΛݮ
https://medium.com/webpack/webpack-3-official-release-15fd2dd8f07b όϯυϧαΠζݮ!?
Magic Comments • V2͔Βͷimport()Λ͏ͱchunk͕ ʮ0.bundle.jsʯˡ Θ͔Γʹ͍͘ • ҙͷchunk໊Λ͚ΒΕΔ import(/* webpackChunkName:
"my-chunk-name" */ 'module');
ͬͯΈΑ͏ • ͔͔ͤͬͩ͘Βangular.ioΛࡐ • ng eject Ͱ webpack.config.js Λநग़ͯ͠ຐվͰ͖Δ VerUPͰWebpack3ରԠ͢Δ͔ΒΒͳ͍͍ͯ͘Αʂ
݁Ռ const { CommonsChunkPlugin, ModuleConcatenationPlugin } = require('webpack').optimize; "plugins": [
new ModuleConcatenationPlugin() ], αΠζ Ϗϧυ࣌ؒ ϓϥάΠϯͳ͠ ,# T ϓϥάΠϯ͋Γ ˞ ,# T ※ webpack.config.jsʹҎԼΛՃ
ҙ • ModuleConcatenationPlugin༻࣌ • UglifyJSPluginผύοέʔδʹ { presets: [["es2015", { "modules":
false }]] } npm i -D git://github.com/mishoo/UglifyJS2#harmony-v2.8.22 npm i -D uglifyjs-webpack-plugin
Webpack 3 ʹҠߦ͠Α͏ʂ