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
380
Webpack 3 触ってみた
puku0x
July 19, 2017
Tweet
Share
More Decks by puku0x
See All by puku0x
Findyの開発生産性向上への取り組み ~Findyフロントエンドの場合~
puku0x
0
380
Findyの開発生産性を上げるためにやったこと
puku0x
1
470
Angularコーディングスタイルガイドはいいぞ
puku0x
1
180
Nx CloudでCIを爆速にした話
puku0x
0
590
Findyのフロントエンド設計刷新を通して得られた技術的負債との向き合い方
puku0x
1
1.6k
最高の開発体験を目指して 〜Findyのフロントエンド設計刷新〜
puku0x
0
730
VSCode GraphQL + GraphQL Code Generator による快適なフロントエンド開発
puku0x
0
2.1k
Nxはいいぞ
puku0x
0
670
Angularの静的サイトジェネレーター「Scully」の最新情報
puku0x
0
290
Other Decks in Technology
See All in Technology
AutomatedLabを使って内部ペンテストを勉強しよう! -やられ社内ネットワークの自動構築-
n_etupirka
1
610
テストケースの自動生成に生成AIの導入を試みた話と生成AIによる今後の期待
shift_evolve
0
190
ペパボのオブザーバビリティ研修2024 説明資料
kesompochy
0
1.1k
Datadog Cloud SIEMを使ってAWS環境の脅威を可視化した話/lifeistech-datadog-cloud-siem
gidajun
0
480
大規模ドラレコデータ収集・機械学習基盤を支える AWS CDK 〜導入・運用事例紹介〜
pemugi
0
110
OSSコミットしてZennの課題を解決した話
dyoshikawa1993
0
150
Flutter研修【MIXI 24新卒技術研修】
mixi_engineers
PRO
0
160
技術負債による事業の失敗はなぜ起こるのか / Why do business failures due to technical debt occur?
i35_267
0
190
How to Think Like a Performance Engineer
csswizardry
4
590
[NIKKEI Tech Talk]Bias for Action!! 実践から学ぶための仕組とコミュニティ / Community for Practice and Learning
kanamasa
0
280
Azure Pipelinesを使用したCICDベースラインアーキテクチャ実践
yuriemori
0
190
公共領域から学ぶ クラウド移行についてエンジニアが意識していること
kawakawa2222
0
140
Featured
See All Featured
The Language of Interfaces
destraynor
151
23k
Design by the Numbers
sachag
277
18k
Designing for humans not robots
tammielis
247
25k
Mobile First: as difficult as doing things right
swwweet
219
8.8k
From Idea to $5000 a Month in 5 Months
shpigford
377
46k
Writing Fast Ruby
sferik
623
60k
Designing with Data
zakiwarfel
96
5k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
23
1.9k
Keith and Marios Guide to Fast Websites
keithpitt
408
22k
GraphQLとの向き合い方2022年版
quramy
36
13k
Atom: Resistance is Futile
akmur
261
25k
GraphQLの誤解/rethinking-graphql
sonatard
59
9.6k
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 ʹҠߦ͠Α͏ʂ