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
なぜテストマネージャの視点が 必要なのか? 〜 一歩先へ進むために 〜
moritamasami
0
240
TS-S205_昨年対比2倍以上の機能追加を実現するデータ基盤プロジェクトでのAI活用について
kaz3284
1
220
Claude Code でアプリ開発をオートパイロットにするためのTips集 Zennの場合 / Claude Code Tips in Zenn
wadayusuke
5
1k
開発者を支える Internal Developer Portal のイマとコレカラ / To-day and To-morrow of Internal Developer Portals: Supporting Developers
aoto
PRO
1
480
スクラムガイドに載っていないスクラムのはじめかた - チームでスクラムをはじめるときに知っておきたい勘所を集めてみました! - / How to start Scrum that is not written in the Scrum Guide 2nd
takaking22
1
160
フルカイテン株式会社 エンジニア向け採用資料
fullkaiten
0
8.8k
MagicPod導入から半年、オープンロジQAチームで実際にやったこと
tjoko
0
110
RSCの時代にReactとフレームワークの境界を探る
uhyo
10
3.5k
ブロックテーマ時代における、テーマの CSS について考える Toro_Unit / 2025.09.13 @ Shinshu WordPress Meetup
torounit
0
130
自作JSエンジンに推しプロポーザルを実装したい!
sajikix
1
190
品質視点から考える組織デザイン/Organizational Design from Quality
mii3king
0
210
IoT x エッジAI - リアルタイ ムAI活用のPoCを今すぐ始め る方法 -
niizawat
0
120
Featured
See All Featured
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
127
53k
Bootstrapping a Software Product
garrettdimon
PRO
307
110k
Code Reviewing Like a Champion
maltzj
525
40k
Reflections from 52 weeks, 52 projects
jeffersonlam
352
21k
A designer walks into a library…
pauljervisheath
207
24k
How to Ace a Technical Interview
jacobian
279
23k
How GitHub (no longer) Works
holman
315
140k
The Cult of Friendly URLs
andyhume
79
6.6k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
358
30k
The Language of Interfaces
destraynor
161
25k
Building Flexible Design Systems
yeseniaperezcruz
329
39k
Large-scale JavaScript Application Architecture
addyosmani
513
110k
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!