Bundling your Front-End with webpack Sandeep Nagra Software Consultant Initial Spark 

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  

How does webpack work? webpack.config.js Entry (AMD, CommonJS and ES6(WP2) ) 

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) 

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? 

Output : Where to output bundle Entry point(s) : Where to start bundling Loaders : How to transform assets Plugins : How to bundle Webpack core concepts 

Demo 

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 

Thanks! initialspark.co.uk @initial_spark