Webpack

A lightning talk for Dayton Web Developers on May 4th 2016

Transcript

1. Webpack ...And why you will want to use it By Steve Loar
2. Webpack is a module bundler
3. Why do I need this? “Today’s websites are evolving into web apps: • More and more JavaScript is in a page. • You can do more stuff in modern browsers. • Fewer full page reloads → even more code in a page. As a result there is a lot of code on the client side! A big code base needs to be organized. Module systems offer the option to split your code base into modules.” * From the webpack documentation
4. Let’s Install Webpack Globally npm install -g webpack In your project npm install webpack --save-dev
5. You can do things on the command line but that won’t go far. You need a config file. The config file is everything… webpack.config.js
6. Start simple module.exports = { entry: './src', output: { path: 'builds', filename: 'bundle.js', }, };
7. Simple Demo Here...
8. Maybe that’s too simple… I want SASS, ES6 and more!
9. Complex Demo Here...
10. What Webpack offers http://webpack.github.io/docs/ It has... • Plugins • Loaders • Code Splitting (Chunks) • Source Maps • Watch • Auto-reloading • Async I/O • Caching • AMD and CommonJS Modules • Targets Web, Node, and WebWorkers
11. That’s webpack! Steve Loar sjl7909@gmail.com @SteveLoar https://speakerdeck.com/sloar/webpack