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 rules!
Search
Henrique Sosa
July 26, 2016
Technology
1
140
Webpack rules!
Henrique Sosa
July 26, 2016
Tweet
Share
More Decks by Henrique Sosa
See All by Henrique Sosa
Desenvolvedor Web também pode construir aplicações desktop
henriquesosa
0
21
Lightning Talk - Testes de UI usando JEST
henriquesosa
0
66
Other Decks in Technology
See All in Technology
PHP開発者のためのSOLID原則再入門 #phpcon / PHP Conference Japan 2025
shogogg
4
900
KubeCon + CloudNativeCon Japan 2025 Recap by CA
ponkio_o
PRO
0
210
MapStore at geOcom 2025: A Year in Review
simboss
PRO
0
100
GitHub Copilot の概要
tomokusaba
1
140
急成長を支える基盤作り〜地道な改善からコツコツと〜 #cre_meetup
stefafafan
0
140
Liquid Glass革新とSwiftUI/UIKit進化
fumiyasac0921
0
270
解析の定理証明実践@Lean 4
dec9ue
1
180
より良いプロダクトの開発を目指して - 情報を中心としたプロダクト開発 #phpcon #phpcon2025
bengo4com
1
3.2k
Amazon ECS & AWS Fargate 運用アーキテクチャ2025 / Amazon ECS and AWS Fargate Ops Architecture 2025
iselegant
17
5.8k
"サービスチーム" での技術選定 / Making Technology Decisions for the Service Team
kaminashi
1
190
GeminiとNotebookLMによる金融実務の業務革新
abenben
0
240
OpenHands🤲にContributeしてみた
kotauchisunsun
1
480
Featured
See All Featured
GitHub's CSS Performance
jonrohan
1031
460k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
48
2.9k
Why Our Code Smells
bkeepers
PRO
337
57k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
Fantastic passwords and where to find them - at NoRuKo
philnash
51
3.3k
Automating Front-end Workflow
addyosmani
1370
200k
Designing for humans not robots
tammielis
253
25k
What’s in a name? Adding method to the madness
productmarketing
PRO
23
3.5k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
331
22k
Bootstrapping a Software Product
garrettdimon
PRO
307
110k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
45
7.5k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
229
22k
Transcript
None
Front end Developer at Direct Talk Henrique Sosa @henriquesosa
Webpack Onde vive? O que come? Como se reproduz?
Module Bundler
<script src="scriptlindo.js"></script>
<script src="scriptlindo.js"></script> var ohYeah = require('ohyeah');
<script src="scriptlindo.js"></script> var ohYeah = require('ohyeah'); require(["moduloAMD"], function(module) { /*
… */ };
<script src="scriptlindo.js"></script> var ohYeah = require('ohyeah'); require(["moduloAMD"], function(module) { /*
… */ }; import Awesomeness from 'Awesomeness';
None
<script src="bundle.js"></script>
Como ele faz isso?
None
pre-loaders pos-loaders loaders plugins
module.exports = { context: path.join(__dirname, "./src"), entry: {}, output: {},
module: { preLoaders: [], loaders: [], posLoaders: [] }, plugins: [], / * something else… */ }
entry: { html: "./index.html", jsx: "./index.jsx", vendor: ["react"] }, output:
{ path: path.join(__dirname, "./dist"), filename: "bundle.js" }
preLoaders: [ { test: /\.js$/, include: path.join(__dirname, "src"), exclude: /node_modules/,
loader: "eslint-loader" } ]
loaders: [ { test: /\.html$/, loader: "file?name=[name].[ext]" }, { test:
/\.scss$/, loaders: ["style", "css", "sass"] } ]
Plugins - CommonsChunkPlugin - HotModuleReplamentPlugin - DefinePlugin - openBrowserPlugin -
devServer - IgnorePlugin - BannerPlugin - UglifyPlugin - OfflinePlugin - CleanPlugin - Extract CSS
PROD vs. DEV
webpack.config.prod.js webpack.config.js
scripts: { "start": "webpack-dev-server --history-api-fallback --hot --inline --progress --colors --port
3000", "dist": "webpack --verbose --colors --display-error-details --config webpack.config.prod.js" }
WEBPACK 2
DICAS
Performance
Performance EXTENSION-loader
Performance EXTENSION-loader Comunidade
Obrigado!