Upgrade to Pro — share decks privately, control downloads, hide ads and more …

NDC London 2017 - Bundling Your front end with webpack

NDC London 2017 - Bundling Your front end with webpack

Slides from NDC London 2017 talk

Sandeep Singh

January 19, 2017
Tweet

More Decks by Sandeep Singh

Other Decks in Technology

Transcript

  1. 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 
  2. 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)
  3. 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?
  4. Output : Where to output bundle Entry point(s) : Where

    to start bundling Loaders : How to transform assets Plugins : How to bundle Webpack core concepts
  5. 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