Learn how the webpack-dev-server is a useful tool for users of webpack. When you run the dev-server, it listens for any changes to your files and automatically rebundles and serves the files.
- [Instructor] Another cool feature of Webpack…is that it allows you to set up a development server…that will automatically reload your project…when things change.…The way the devServer works…is that it uses a Node.js Express server.…This uses the webpack-dev-middleware…to serve a webpack.bundle.…It opens up a socket using Socket.IO…that listens for changes.…The webpack-dev-server is a really important tool to have…at your disposal when working with Webpack.…When you include it in your project,…it will enable live reloading of all of your assets.…
So let's start out by installing it.…We're going to run npm install webpack-dev-server…and send it the save-dev flag.…Next, we're going to open up Sublime Text…and we're going to make some adjustments here…to the wepack.config.…So here on line 9, I'm going to add devServer…as a new key inside of my module.exports object,…and the devServer is going to have…a couple of important things.…
First up, it's going to have a contentBase…and contentBase is literally going to be…what's on line 7 there.…
- What is webpack?
- Running webpack from the command line
- Setting up loaders
- Loading CSS
- Compiling SCSS
- Using webpack plugins
Skill Level Intermediate
1. What is webpack?
2. webpack Loaders
3. webpack and CSS
4. webpack Plugins
Next steps1m 1s
- Mark as unwatched
- Mark all as unwatched
Are you sure you want to mark all the videos in this course as unwatched?
This will not affect your course history, your reports, or your certificates of completion for this course.Cancel
Take notes with your new membership!
Type in the entry box, then click Enter to save your note.
1:30Press on any video thumbnail to jump immediately to the timecode shown.
Notes are saved with you account but can also be exported as plain text, MS Word, PDF, Google Doc, or Evernote.