🎁

12 Days of Baddass Courses sale! Get instant access to the entire egghead library of courses and lessons for 58% off.

Runs out in:
13 : 08 : 52 : 05
Join egghead, unlock knowledge.

Want more egghead? It's 58% off for a limited time only!

This lesson is for members. Join us? Get access to all 3,000+ tutorials + a community with expert developers around the world.

Unlock All Content for 40% Off
1×
Become a member
to unlock all features
Autoplay

    Update your Bundle with each File Save with webpack's watch Mode

    Andy Van SlaarsAndy Van Slaars
    webpackwebpack

    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.

    Code

    Code

    Become a Member to view code

    You must be a Member to view code

    Access all courses and lessons, track your progress, gain confidence and expertise.

    Become a Member
    and unlock code for this lesson
    Discuss

    Discuss

    Transcript

    Transcript

    Instructor: 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.

    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.

    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.

    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.

    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.

    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.