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
事業成長の裏側:エンジニア組織と開発生産性の進化 / 20250703 Rinto Ikenoue
shift_evolve
PRO
2
22k
【5分でわかる】セーフィー エンジニア向け会社紹介
safie_recruit
0
27k
関数型プログラミングで 「脳がバグる」を乗り越える
manabeai
1
190
MUITにおける開発プロセスモダナイズの取り組みと開発生産性可視化の取り組みについて / Modernize the Development Process and Visualize Development Productivity at MUIT
muit
1
16k
面倒な作業はAIにおまかせ。Flutter開発をスマートに効率化
ruideengineer
0
260
Getting to Know Your Legacy (System) with AI-Driven Software Archeology (WeAreDevelopers World Congress 2025)
feststelltaste
1
130
ネットワーク保護はどう変わるのか?re:Inforce 2025最新アップデート解説
tokushun
0
210
MobileActOsaka_250704.pdf
akaitadaaki
0
130
Delegating the chores of authenticating users to Keycloak
ahus1
0
140
ビズリーチにおけるリアーキテクティング実践事例 / JJUG CCC 2025 Spring
visional_engineering_and_design
1
120
開発生産性を測る前にやるべきこと - 組織改善の実践 / Before Measuring Dev Productivity
kaonavi
10
4.6k
fukabori.fm 出張版: 売上高617億円と高稼働率を陰で支えた社内ツール開発のあれこれ話 / 20250704 Yoshimasa Iwase & Tomoo Morikawa
shift_evolve
PRO
2
7.8k
Featured
See All Featured
Side Projects
sachag
455
42k
Statistics for Hackers
jakevdp
799
220k
[RailsConf 2023] Rails as a piece of cake
palkan
55
5.7k
What’s in a name? Adding method to the madness
productmarketing
PRO
23
3.5k
Raft: Consensus for Rubyists
vanstee
140
7k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
8
820
The Power of CSS Pseudo Elements
geoffreycrofte
77
5.9k
Balancing Empowerment & Direction
lara
1
430
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
229
22k
Practical Orchestrator
shlominoach
189
11k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
16k
Optimising Largest Contentful Paint
csswizardry
37
3.3k
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 ʹҠߦ͠Α͏ʂ