Introduction to Webpack-Dev-Server

Released on June 10th 2017
Length: 17:32

Webpack-dev-server is a webpack add-on that provides a few useful features such as live reloading. Essentially each time a change to a file is made, webpack-dev-server will refresh your browser automatically. Not only that, but webpack-dev-server also provides for page updates without a page refresh, a feature called Hot Module Replacement. Learn how to implement this add-on within your frontend and backend apps to save you time and supercharge your development workflow. Video Git Repo: ----------------------------- https://github.com/christopher4lis/canvas-boilerplate Snippet for Reloading External Stylesheets / CSS: --------------------------------------------------------------- https://gist.github.com/christopher4lis/ce3d09c10732dca5c9e9d88862d122d8 Video Timeline: ----------------------------- 00:00 - What is webpack-dev-server and why should we use it? 04:43 - Initial project setup 09:53 - Starting up webpack-dev-server 11:07 - Configuring webpack-dev-server's base directory 12:08 - Adding hot module replacement 15:20 - Hot module replacement for CSS, SCSS, and extracted stylesheets The Platform: ------------------------- http://chriscourses.com is a platform in progress whose goal is to educate aspiring and seasoned web developers via story driven learning. Each course tells a different story, and each milestone reveals a different scene. With an expansive universe to explore, you can track your progress, and gain the necessary skills needed to build your dreams. For updates on the progress of chriscourses.com and future videos, join the Chris Courses mailing list at http://chriscourses.com. Chris Courses Social: ------------------------------------- Twitter: https://twitter.com/chriscourses Facebook: https://www.facebook.com/chriscourses Christopher Lis Social: --------------------------------------- Twitter: https://twitter.com/christopher4lis CodePen: http://codepen.io/christopher4lis