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
20
Lightning Talk - Testes de UI usando JEST
henriquesosa
0
64
Other Decks in Technology
See All in Technology
SPI原点回帰論:事業課題とFour Keysの結節点を見出す実践的ソフトウェアプロセス改善 / DevOpsDays Tokyo 2024
visional_engineering_and_design
4
1.3k
コンテナセキュリティの基本と脅威への対策
kyohmizu
3
670
コードを書く隙間を見つけて生きていく技術/Findy 思考の現在地
fujiwara3
24
4.8k
Next'24 事例セッションの紹介とクラウド資格を活用したキャリア形成について語りMuscle
yasumuusan
0
250
Microsoft Cloudで開発ライフサイクルを保護する
kkamegawa
0
140
レガシーをぶっ壊せ。AEONで始めるDevRelの話 / Qiita Night 2024-2-22
aeonpeople
3
110
「ふりかえりのふりかえり」をふりかえり、実のあるふりかえりにする
naitosatoshi
0
210
SIEMを用いて、セキュリティログ分析の可視化と分析を実現し、PDCAサイクルを回してみた
coconala_engineer
0
190
Oracle Exadata Database Service on Cloud@Customer (ExaDB-C@C) - UI スクリーン・キャプチャ集
oracle4engineer
PRO
1
1.1k
反実仮想機械学習とは何か
usaito
PRO
6
1.3k
Tebiki株式会社 エンジニア採用資料
tebiki
0
4k
プロトタイピングによる不確実性の低減 / Reducing Uncertainty through Prototyping
ohbarye
3
150
Featured
See All Featured
Git: the NoSQL Database
bkeepers
PRO
421
63k
The MySQL Ecosystem @ GitHub 2015
samlambert
242
12k
jQuery: Nuts, Bolts and Bling
dougneiner
59
7.1k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
219
21k
What’s in a name? Adding method to the madness
productmarketing
PRO
15
2.6k
Web Components: a chance to create the future
zenorocha
304
41k
Atom: Resistance is Futile
akmur
258
25k
Code Reviewing Like a Champion
maltzj
513
39k
The Invisible Side of Design
smashingmag
293
49k
The Brand Is Dead. Long Live the Brand.
mthomps
48
28k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
13
1.5k
Typedesign – Prime Four
hannesfritz
36
2k
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!