Using Webpack in Production

A 5 minute lightning talk

Transcript

1. using webpack in production Theo Pak tpak@cimpress.com March 22, 2016
2. 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.
3. 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.
4. 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.
5. 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>
6. <!DOCTYPE html> <html> <body> <div class="app"> </div> <script src="my-jquery-plugin.js"></script> <script src="jquery.min.js"></script> </body> </html>
7. 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>
8. webpack resolves dependencies
9. 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
10. /* 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>
11. /* 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>
12. Thanks! Theo Pak tpak@cimpress.com ICE Cloud Engineering https://developer.cimpress.io