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

4e5fd4655e0c94ae66cebb466bf8e788?s=128

Sandeep Singh

January 19, 2017
Tweet

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