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
Sponsored
·
SiteGround - Reliable hosting with speed, security, and support you can count on.
→
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
24
Lightning Talk - Testes de UI usando JEST
henriquesosa
0
71
Other Decks in Technology
See All in Technology
名刺メーカーDevグループ 紹介資料
sansan33
PRO
0
1k
制約が導く迷わない設計 〜 信頼性と運用性を両立するマイナンバー管理システムの実践 〜
bwkw
2
850
GCASアップデート(202510-202601)
techniczna
0
250
ブロックテーマでサイトをリニューアルした話 / 2026-01-31 Kansai WordPress Meetup
torounit
0
440
インフラエンジニア必見!Kubernetesを用いたクラウドネイティブ設計ポイント大全
daitak
0
320
レガシー共有バッチ基盤への挑戦 - SREドリブンなリアーキテクチャリングの取り組み
tatsukoni
0
200
30万人の同時アクセスに耐えたい!新サービスの盤石なリリースを支える負荷試験 / SRE Kaigi 2026
genda
1
250
プロポーザルに込める段取り八分
shoheimitani
0
160
GSIが複数キー対応したことで、俺達はいったい何が嬉しいのか?
smt7174
3
140
Embedded SREの終わりを設計する 「なんとなく」から計画的な自立支援へ
sansantech
PRO
3
2.1k
予期せぬコストの急増を障害のように扱う――「コスト版ポストモーテム」の導入とその後の改善
muziyoshiz
1
1.5k
AIと新時代を切り拓く。これからのSREとメルカリIBISの挑戦
0gm
0
690
Featured
See All Featured
The SEO Collaboration Effect
kristinabergwall1
0
350
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
25
1.7k
StorybookのUI Testing Handbookを読んだ
zakiyama
31
6.6k
Building Better People: How to give real-time feedback that sticks.
wjessup
370
20k
YesSQL, Process and Tooling at Scale
rocio
174
15k
Optimizing for Happiness
mojombo
379
71k
Building AI with AI
inesmontani
PRO
1
680
Writing Fast Ruby
sferik
630
62k
Utilizing Notion as your number one productivity tool
mfonobong
2
210
Become a Pro
speakerdeck
PRO
31
5.8k
Applied NLP in the Age of Generative AI
inesmontani
PRO
4
2k
Raft: Consensus for Rubyists
vanstee
141
7.3k
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!