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 Fundamentals
Search
Cheesecake Labs
August 16, 2018
Programming
0
37
Webpack Fundamentals
Beatriz Silveira
Cheesecake Labs
August 16, 2018
Tweet
Share
More Decks by Cheesecake Labs
See All by Cheesecake Labs
Cats' wellness & care
cheesecakelabs
0
38
How do we create the first impressions?
cheesecakelabs
0
42
Menstrual cup: suit and freedom
cheesecakelabs
0
43
Life is a cycle, better with a bicycle
cheesecakelabs
0
37
Interview Process: how to get the best of people
cheesecakelabs
1
64
My capsule wardrobe experience
cheesecakelabs
3
48
Stonewall Rebellion and its impact on LGBTQIA+ history
cheesecakelabs
1
27
Pregnancy, childbirth and breastfeeding: What do I have to do with it?
cheesecakelabs
0
38
MBTI - Psychological types described by Jung
cheesecakelabs
0
88
Other Decks in Programming
See All in Programming
GraphQLサーバの構成要素を整理する #ハッカー鮨 #tsukijigraphql / graphql server technology selection
izumin5210
2
220
デザインシステムで Tailwind CSSとCSS in JSに分散投資をしたら良かった話
fsubal
18
4.8k
[SF Ruby, March 2024] Rails on Wasm
palkan
0
380
StreamlitとTerraformでデータカタログを作った話
gussan0223
0
300
try! Swift Tokyo 2024のLT枠に採択されたプロポーザルを出すときに考えていたこと
ski
0
340
From Spring Boot 2 to Spring Boot 3 with Java 22 and Jakarta EE
ivargrimstad
0
910
脱・初心者!脱・マネコン!AWS CDKを使ってみませんか!?
har1101
0
300
VSCodeでのDatabricks開発もお勧めしたい/I would also recommend Databricks development with VSCode.
kazumain
0
240
Java 22 Overview
kishida
1
170
App Router への移行は「改善」となり得るのか?/ Can migration to App Router be an improvement
takefumiyoshii
8
2.1k
HUIT新歓2024「競技プログラミング、やってみませんか?」
slephy2784
1
250
Designing for tomorrow's programming workflows
honnibal
PRO
2
110
Featured
See All Featured
Designing with Data
zakiwarfel
95
4.8k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
356
22k
How GitHub Uses GitHub to Build GitHub
holman
468
290k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
240
1.2M
Docker and Python
trallard
33
2.7k
What's new in Ruby 2.0
geeforr
337
31k
Creatively Recalculating Your Daily Design Routine
revolveconf
209
11k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
220
21k
Building a Modern Day E-commerce SEO Strategy
aleyda
16
6.4k
Design by the Numbers
sachag
274
18k
Practical Orchestrator
shlominoach
181
9.7k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
60
14k
Transcript
Webpack Fundamentals
Origins
JS it's just scripts
Inline Script
Problems • Doesn't Scale • Too many Scripts • Performance
Problems • Unmaintainable Scripts • Scope • Size • Readability • Fragility
IIFE's - Immediately Invoked Function Expression
IIFE's • Full rebuilds every time • Lots of IIFE's
are slow
How to import JS on Backend? COMMON JS
CommonJS -> NodeJS
JavaScript Modules CommonJS
JavaScript Modules Was too popular, but how to use this
on Browser Commonjs is synchronous !!! No browser support !!! CommonJS
AMD To transfer module syntax from server usage to browser
usage, CommonJS proposed AMD - Asynchronous Module Definition
AMD But, How can I use it ?
RequireJS • Is a JavaScript module loader. • It helps
load modules asynchronously as needed • You can write AMD style module
RequireJS
Browserify • With Browserify, you can use CommonJS module in
browser application • Traverse the dependency tree of your codes and bundle them up in a single file
Browserify
ES6 Module Syntax • Browsers are not ready for this
new syntax. • There are tools available. These tools allow us to use ES6 module syntax today.
Webpack • Webpack is a module bundler. • If it
is the same as Browserify, why would we need yet another module bundler? • Webpack can handle CommonJS, AMD and ES6 modules.
The Core Concepts • Entry • Output • Loaders •
Plugins
Entry Default ./src/index.js webpack.config.js
Output Default ./dist/main.js
Loaders & Rules test A regular expression that instructs the
compiler which files to run the loader against. use An array/string/function that returns loader objects.
Chaining Loaders less-loader css-loader style-loader style.less style.css *.js Inline style
Plugins Allow you to hook into the entire compilation lifecycle
Add new instance of plugin to plugins key in config object
Using during development 1. Webpack's watch mode 2. webpack-dev-server
Webpack's Watch Mode npm run watch
webpack -dev-server webpack.config.js
webpack -dev-server package.json
Tree Shaking Dead-code elimination
Tree Shaking
Tree Shaking
Production Goal - Improve load time 1. Minified bundles 2.
Lighter weight source maps 3. Optimized assets It's recommend writing separate webpack configurations for each environment