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
41
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
49
How do we create the first impressions?
cheesecakelabs
0
53
Menstrual cup: suit and freedom
cheesecakelabs
0
57
Life is a cycle, better with a bicycle
cheesecakelabs
0
51
Interview Process: how to get the best of people
cheesecakelabs
1
81
My capsule wardrobe experience
cheesecakelabs
3
59
Stonewall Rebellion and its impact on LGBTQIA+ history
cheesecakelabs
1
37
Pregnancy, childbirth and breastfeeding: What do I have to do with it?
cheesecakelabs
0
45
MBTI - Psychological types described by Jung
cheesecakelabs
0
130
Other Decks in Programming
See All in Programming
Railsアプリケーションと パフォーマンスチューニング ー 秒間5万リクエストの モバイルオーダーシステムを支える事例 ー Rubyセミナー 大阪
falcon8823
5
1.1k
Startups on Rails in Past, Present and Future–Irina Nazarova, RailsConf 2025
irinanazarova
0
100
ruby.wasmで多人数リアルタイム通信ゲームを作ろう
lnit
3
470
Code as Context 〜 1にコードで 2にリンタ 34がなくて 5にルール? 〜
yodakeisuke
0
130
たった 1 枚の PHP ファイルで実装する MCP サーバ / MCP Server with Vanilla PHP
okashoi
1
250
猫と暮らす Google Nest Cam生活🐈 / WebRTC with Google Nest Cam
yutailang0119
0
120
プロダクト志向なエンジニアがもう一歩先の価値を目指すために意識したこと
nealle
0
130
なぜ適用するか、移行して理解するClean Architecture 〜構造を超えて設計を継承する〜 / Why Apply, Migrate and Understand Clean Architecture - Inherit Design Beyond Structure
seike460
PRO
3
760
Rails Frontend Evolution: It Was a Setup All Along
skryukov
0
140
Python型ヒント完全ガイド 初心者でも分かる、現代的で実践的な使い方
mickey_kubo
1
110
PHPで始める振る舞い駆動開発(Behaviour-Driven Development)
ohmori_yusuke
2
390
PicoRuby on Rails
makicamel
2
130
Featured
See All Featured
GraphQLとの向き合い方2022年版
quramy
49
14k
Optimizing for Happiness
mojombo
379
70k
Six Lessons from altMBA
skipperchong
28
3.9k
Bash Introduction
62gerente
613
210k
Why You Should Never Use an ORM
jnunemaker
PRO
58
9.4k
What's in a price? How to price your products and services
michaelherold
246
12k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
10
950
How to Think Like a Performance Engineer
csswizardry
25
1.7k
Writing Fast Ruby
sferik
628
62k
Art, The Web, and Tiny UX
lynnandtonic
299
21k
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
3.9k
4 Signs Your Business is Dying
shpigford
184
22k
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