Join egghead, unlock knowledge.

Want more egghead?

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

Unlock This Lesson
1×
Become a member
to unlock all features

Level Up!

Access all courses & lessons on egghead today and lock-in your price for life.

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.