Introduction to Webpack-Dev-Server

🚀View more development courses and content at https://chriscourses.com/

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 ... https://www.youtube.com/watch?v=s1UdeDaEKo4