Export Your CSS with the extract-text-webpack-plugin - Ep. 4

Released on November 6th 2016
Length: 06:58

Learn how to use the extract-text-webpack-plugin, combined with webpack, to export your CSS into a separate file. By default, CSS loaders for webpack will inline your CSS rather than placing it within a separate CSS file. This is good for page speed, but only if the amount of CSS you’re using is very minimal. When the amount of CSS you’re using starts to grow, inline CSS can cause flashes of unstyled content, and slow down your site since it can’t be cached. Follow along step by step as I take you through what would be a time consuming task. Git Repo So You Can Follow Along: https://github.com/christopher4lis/cc-extract-text-webpack-plugin Timeline: 0:08 - What is the extract-text-webpack-plugin and what does it do? 0:21 - Why we shouldn't always inline our CSS 0:53 - Implementation from Git repo begins 2:38 - Explanation for using webpack 2 and extract-text 2 4:11 - Updating our webpack config to take extract-text into account Resources: https://github.com/webpack/extract-text-webpack-plugin https://medium.com/@rajaraodv/webpack-the-confusing-parts-58712f8fcad9#.2eg21uexb http://javascriptplayground.com/blog/2016/10/moving-to-webpack-2/ For updates on the progress of chriscourses.com and future videos, join the Chris Courses mailing list at http://chriscourses.com. Support Chris Courses Through Patreon: -------------------------------------- https://www.patreon.com/chriscourses Chris Courses Social: --------------------- Twitter: https://twitter.com/chriscourses Facebook: https://www.facebook.com/chriscourses Instagram: https://www.instagram.com/chriscourses Christopher Lis Social: ----------------------- Twitter: https://twitter.com/christopher4lis CodePen: http://codepen.io/christopher4lis