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
Using Webpack in Production
Search
Theo Pak
March 22, 2016
Technology
1
380
Using Webpack in Production
A 5 minute lightning talk
Theo Pak
March 22, 2016
Tweet
Share
More Decks by Theo Pak
See All by Theo Pak
React skeleton states save the day (and look good doing it)
theopak
3
770
React Performance Optimization
theopak
0
390
Cool Things About Docker
theopak
0
340
Arduino: Why, Which, and How
theopak
0
440
Bathchat
theopak
0
1.4k
Designing for Google Glass
theopak
3
550
Intro to Arduino - RPI Embedded Hardware Club (10 OCT 2013)
theopak
0
170
Intro to Arduino - RPI Embedded Hardware Club
theopak
0
240
Other Decks in Technology
See All in Technology
WebRTC と AI の組み合わせ
tnoho
0
390
LLMOps : ΔMLOps
shuntaito
13
2.5k
Oracle Cloud Infrastructure:2024年10月度サービス・アップデート
oracle4engineer
PRO
0
290
全社を巻き込んだ業務オペレーション改善と、それは事業成長に貢献しているのか?を実感した話
marroooon
0
160
AIとともに歩んだライブラリアップデートの道のり/ vue-fes-japan-2024-link-and-motivation
lmi
2
2.5k
20241017_俺たちは雰囲気で scope をやっているけどもうちょっとなんとかならんのか?
tokai235
0
420
さくっと実践!Postmanを活用した高品質で持続可能なAPI管理
yokawasa
5
370
MOSH_companydeck_202410
mosh_inc
0
120
MobileActOsaka_241018.pdf
akaitadaaki
0
120
複数の外部サービスデータの統合と変換を実現する Railsのインポートアーキテクチャ / Rails import architecture for integration and transformation of multiple external service data
aiandrox
0
390
サーバーレス SaaS における運用監視の負荷軽減のためのアプローチ
ririru0325
0
100
Deep dive into Nuxt Server Components
wattanx
1
1.5k
Featured
See All Featured
The Pragmatic Product Professional
lauravandoore
31
6.2k
Scaling GitHub
holman
458
140k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
28
9k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
131
33k
Testing 201, or: Great Expectations
jmmastey
38
7k
Six Lessons from altMBA
skipperchong
26
3.4k
StorybookのUI Testing Handbookを読んだ
zakiyama
26
5.2k
Why You Should Never Use an ORM
jnunemaker
PRO
53
9k
Intergalactic Javascript Robots from Outer Space
tanoku
268
27k
Code Review Best Practice
trishagee
64
17k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.2k
Thoughts on Productivity
jonyablonski
67
4.3k
Transcript
using webpack in production Theo Pak
[email protected]
March 22, 2016
ICE Cloud Engineering Cloud Engineering uses webpack to create production
builds of our web app, MCP Portal. Try it! developer.cimpress.io The MCP Portal has used webpack since v0.
ICE Cloud Engineering Cloud Engineering uses webpack to create production
builds of our web app, MCP Portal. Try it! developer.cimpress.io The MCP Portal has used webpack since v0.
ICE Cloud Engineering Cloud Engineering uses webpack to create production
builds of our web app, MCP Portal. Try it! developer.cimpress.io The MCP Portal has used webpack since v0.
Problem: Why doesn’t this work? <!DOCTYPE html> <html> <body> <div
class="app"> Why doesn’t this work? </div> <script src="my-jquery-plugin.js"></script> <script src="jquery.min.js"></script> </body> </html>
<!DOCTYPE html> <html> <body> <div class="app"> </div> <script src="my-jquery-plugin.js"></script> <script
src="jquery.min.js"></script> </body> </html>
Now it works! <!DOCTYPE html> <html> <body> <div class="app"> </div>
<script src="jquery.min.js"></script> <script src="my-jquery-plugin.js"></script> </body> </html>
webpack resolves dependencies
Building with webpack # Let’s take these files, and build
# a minified ‘bundle.js’ $ ls ├── app.css ├── app.js ├── demo.js ├── index.html └── node_modules ├── d3 └── lodash # …using webpack! $ webpack app.js bundle.js -p Hash: cccda8d0a3eed410cbc9 Version: webpack 1.12.14 Time: 3477ms Asset Size Chunks bundle.js 7.5 MB 0 # That’s it! Now bundle.js exists # and you can use it from your app. $ open index.html
/* app.css */ html, body { font-family: "Comic Sans MS";
color: red; background-color: pink; } #app { margin: 0 auto; background-color: teal; } /* app.js */ // use CommonJS or // AMD require syntax var d3 = require('d3') var myApp = require('demo.js') // use webpack loaders // for other file types require('app.css') // Now write your code (function () { console.log('ready') var svg = d3.select('#app') .append('svg') myApp.start(svg) }) Building with webpack # Let’s take these files, and build # a minified ‘bundle.js’ $ ls ├── app.css ├── app.js ├── demo.js ├── index.html └── node_modules ├── d3 └── lodash # …using webpack! $ webpack app.js bundle.js -p Hash: cccda8d0a3eed410cbc9 Version: webpack 1.12.14 Time: 3477ms Asset Size Chunks bundle.js 7.5 MB 0 # That’s it! Now bundle.js exists # and you can use it from your app. $ open index.html <!DOCTYPE html> <html> <body> <div id="app"></div> <script src="bundle.js"> </script> </body> </html>
/* app.css */ html, body { font-family: "Comic Sans MS";
color: red; background-color: pink; } #app { margin: 0 auto; background-color: teal; } /* app.js */ // use CommonJS or // AMD require syntax var d3 = require('d3') var myApp = require('demo.js') // use webpack loaders // for other file types require('app.css') // Now write your code (function () { console.log('ready') var svg = d3.select('#app') .append('svg') myApp.start(svg) }) Building with webpack # Let’s take these files, and build # a minified ‘bundle.js’ $ ls ├── app.css ├── app.js ├── demo.js ├── index.html └── node_modules ├── d3 └── lodash # …using webpack! $ webpack app.js bundle.js -p Hash: cccda8d0a3eed410cbc9 Version: webpack 1.12.14 Time: 3477ms Asset Size Chunks bundle.js 7.5 MB 0 # That’s it! Now bundle.js exists # and you can use it from your app. $ open index.html <!DOCTYPE html> <html> <body> <div id="app"></div> <script src="bundle.js"> </script> </body> </html>
Thanks! Theo Pak
[email protected]
ICE Cloud Engineering https://developer.cimpress.io