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
400
Webpack 3 触ってみた
puku0x
July 19, 2017
Tweet
Share
More Decks by puku0x
See All by puku0x
ファインディにおけるフロントエンド技術選定の歴史
puku0x
2
170
ファインディでのGitHub Actions活用事例
puku0x
9
3k
Findyの開発生産性向上への取り組み ~Findyフロントエンドの場合~
puku0x
0
410
Findyの開発生産性を上げるためにやったこと
puku0x
1
570
Angularコーディングスタイルガイドはいいぞ
puku0x
1
270
Nx CloudでCIを爆速にした話
puku0x
0
780
Findyのフロントエンド設計刷新を通して得られた技術的負債との向き合い方
puku0x
1
1.7k
最高の開発体験を目指して 〜Findyのフロントエンド設計刷新〜
puku0x
0
790
VSCode GraphQL + GraphQL Code Generator による快適なフロントエンド開発
puku0x
0
2.6k
Other Decks in Technology
See All in Technology
技術スタックだけじゃない、業務ドメイン知識のオンボーディングも同じくらいの量が必要な話
niftycorp
PRO
0
130
LINE NEWSにおけるバックエンド開発
lycorptech_jp
PRO
0
360
Amazon Athenaから利用時のGlueのIcebergテーブルのメンテナンスについて
nayuts
0
110
OPENLOGI Company Profile
hr01
0
60k
Qiita Organizationを導入したら、アウトプッターが爆増して会社がちょっと有名になった件
minorun365
PRO
1
310
20250304_赤煉瓦倉庫_DeepSeek_Deep_Dive
hiouchiy
2
120
MIMEと文字コードの闇
hirachan
2
1.5k
マルチアカウント環境における組織ポリシーについて まとめてみる
nrinetcom
PRO
2
100
遷移の高速化 ヤフートップの試行錯誤
narirou
6
1.9k
Aurora PostgreSQLがCloudWatch Logsに 出力するログの課金を削減してみる #jawsdays2025
non97
1
240
大規模アジャイルフレームワークから学ぶエンジニアマネジメントの本質
staka121
PRO
3
1.6k
ExaDB-XSで利用されているExadata Exascaleについて
oracle4engineer
PRO
3
300
Featured
See All Featured
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
46
2.4k
Thoughts on Productivity
jonyablonski
69
4.5k
Being A Developer After 40
akosma
89
590k
Code Reviewing Like a Champion
maltzj
521
39k
Building an army of robots
kneath
303
45k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
47
5.2k
Documentation Writing (for coders)
carmenintech
68
4.6k
Optimising Largest Contentful Paint
csswizardry
34
3.1k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
656
59k
For a Future-Friendly Web
brad_frost
176
9.6k
Producing Creativity
orderedlist
PRO
344
40k
RailsConf 2023
tenderlove
29
1k
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 ʹҠߦ͠Α͏ʂ