Update your Bundle with each File Save with webpack's watch Mode
It's inconvenient during development to have to run a script each time we make a change to our source. We can have webpack generate an updated bundle as we make changes. In this lesson, we'll create an npm script to run webpack in watch mode and see it in action as we modify some source files.
Instructor: [00:00] Right now, if I want to make a change to this file and see it reflected in my web application, I need to make my change, save my file. Then I have to go into my terminal, npm run build to run a webpack build. Once that build is complete, I have to come over here and refresh and see if my changes worked.
[00:24] We can run webpack in watch mode so that every time we save a file, it'll automatically rebuild so that we can save ourselves the trouble of going into the terminal to run the build ourselves.
[00:34] To do that, I'm going to open up the package.json file. Right after the build script, I'm going to add a second script called dev. Dev is going to also run webpack, but this time I'm going to pass in the watch flag.
[00:48] I'd also like this dev script to optimize my builds for build speed during development. I'm going to come back in here. I'm also going to add the mode flag. I'm going to set that to development.
[01:00] Now I'm going to save our package.json. In the terminal, I'm going to run npm run dev. We'll see as part of the output, it'll tell us that webpack is watching the files. Then we have our initial build output. If I come into app here and I make some changes -- I'll capitalize that, I'm going to save that -- we'll see in the terminal that it's done and rebuilt.
[01:33] If I switch to my browser and I refresh, we'll see that our updates are reflected. When I'm done with watch mode, I can hit Ctrl-C in the terminal to quit that process.
Not sure why the course videos are not in order. Webpack's watch mode is added in 11, but already used in 10. Adding GitHub remote is in 4, but already mentioned in 3.
Sorry, there are a couple issues with video order. We're working on getting it straightened out as soon as possible.
I've followed each video to the letter but watch mode exists instantly after first run. I've found a solution that adds node_modules directory to watchOptions.ignored value in webpack development config. Could you comment on that? :)
I've followed each video to the letter but watch mode exists instantly after first run. I've found a solution that adds node_modules directory to watchOptions.ignored value in webpack development config. Could you comment on that? :)
Juliana,
I'm not sure what's happening there. Is it exiting cleanly or with an error?
Not sure why the course videos are not in order. Webpack's watch mode is added in 11, but already used in 10. Adding GitHub remote is in 4, but already mentioned in 3.