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
機械学習を扱うプラットフォーム開発と運用事例
lycorptech_jp
PRO
0
620
新規プロダクトでプロトタイプから正式リリースまでNext.jsで開発したリアル
kawanoriku0
1
200
品質視点から考える組織デザイン/Organizational Design from Quality
mii3king
0
210
開発者を支える Internal Developer Portal のイマとコレカラ / To-day and To-morrow of Internal Developer Portals: Supporting Developers
aoto
PRO
1
480
Platform開発が先行する Platform Engineeringの違和感
kintotechdev
4
580
はじめてのOSS開発からみえたGo言語の強み
shibukazu
3
970
Django's GeneratedField by example - DjangoCon US 2025
pauloxnet
0
150
Rustから学ぶ 非同期処理の仕組み
skanehira
1
150
スクラムガイドに載っていないスクラムのはじめかた - チームでスクラムをはじめるときに知っておきたい勘所を集めてみました! - / How to start Scrum that is not written in the Scrum Guide 2nd
takaking22
1
160
新アイテムをどう使っていくか?みんなであーだこーだ言ってみよう / 20250911-rpi-jam-tokyo
akkiesoft
0
340
Webアプリケーションにオブザーバビリティを実装するRust入門ガイド
nwiizo
7
880
人工衛星のファームウェアをRustで書く理由
koba789
15
8.2k
Featured
See All Featured
Facilitating Awesome Meetings
lara
55
6.5k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
31
2.2k
Building Better People: How to give real-time feedback that sticks.
wjessup
368
19k
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
4k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
18
1.1k
StorybookのUI Testing Handbookを読んだ
zakiyama
31
6.1k
Speed Design
sergeychernyshev
32
1.1k
Embracing the Ebb and Flow
colly
87
4.8k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
50k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
34
6k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
PRO
188
55k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
23
1.4k
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!