‘watch’ Mode

We can have webpack running in a watch mode. With watch-mode enabled, webpack will keep ‘watch’-ing for any changes we make in our code and once we save the changes, it will rerun by itself to rebuild the package.

To enable ‘watch’ mode, simply add a property ‘watch’ with its value ‘true’ in webpack.config.js as below:

Run npm start command for webpack to restart, this time with watch mode enabled:

$ npm start

Open the ./dist/index.html file in browser (or refresh if already open). There should be no change in index.html, we should see the same HTML content and console log message as we last updated it in the previous section. Below is the current state of index.html if you have been following this guide.

(click on image to see in expanded popover view)

Now, lets make some change in our app.js and see if the webpack’s watch mode is working:

Update the console.log message in app.js as below:

console.log("Welcome! Greetings from app.js. Let's learn Webpack2");

and save the file.

Once we save the file, we will notice webpack running and rebuilding the code package in the terminal/command window.

And if we refresh the index.html file in the browser, we should see the updated console log message:

Next we will see how webpack bundles our module dependencies.

[<<Prev: html-webpack-plugin]

[ Next:Bundling Module Dependencies>>]