NDC London 2017 - Bundling Your front end with webpack

Slides from NDC London 2017 talk

Transcript

1. Bundling your Front-End with webpack Sandeep Nagra Software Consultant Initial Spark
2. What is webpack? o Module Bundler o Takes in a bunch of assets (JS, HTML, CSS etc) and their dependencies and packages them into a bundle for the client o Every asset is a “module” - JS, CSS, HTML, Fonts etc o Load only what you need, when you need 
3. How does webpack work? webpack.config.js Entry (AMD, CommonJS and ES6(WP2) )
4. Why webpack? o Dependency graph - Dependencies loading out of order o Dead code elimination (Tree shaking) - Bundling unused JS in production o Code splitting - (SPA) Large app.js (1MB+) file o Asset processing – Save extra HTTP requests o Asset hashing – Versioning (Cache busting)
5. HTML HTML Task Runner (e.g. Handlebars) JS JS Task Runner (e.g. Uglify) CSS Task Runner (e.g. SASS) CSS What about grunt/gulp aka Task Runners?
6. Output : Where to output bundle Entry point(s) : Where to start bundling Loaders : How to transform assets Plugins : How to bundle Webpack core concepts
7. Demo
8. o Webpack Documentation : webpack.github.io o Webpack 2 Documentation : github.com/webpack/webpack.io o awesome-webpack : git.io/awesome-webpack o Webpack Deep Dive : frontendmasters.com/courses/webpack o eBook : survivejs.com/webpack/introduction o Online Playground : www.webpackbin.com Resources
9. Thanks! initialspark.co.uk @initial_spark