Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Is there a way in webpack watch mode to display on screen the timestamp when webpack last updated the build?

Sometimes while running webpack in watch mode and editing source files I am not sure whether webpack has packed my changes or not.

Is there a way to print a timestamp to the console each time webpack updates the bundle?

like image 226
Bjorn Reppen Avatar asked Jan 17 '17 18:01

Bjorn Reppen


People also ask

How can we make the webpack to watch for changes?

Using Watch Mode You can instruct webpack to "watch" all files within your dependency graph for changes. If one of these files is updated, the code will be recompiled so you don't have to run the full build manually. Now run npm run watch from the command line and see how webpack compiles your code.

How does webpack watch work?

With watchmode, Webpack will watch your files and when one of them changes, it will immediately rerun the build and recreate your output file. After watch is set to true, when you run the webpack command, webpack will rebuild your bundle when any of your files change. Webpack has a web server called webpack-dev-server.

What are webpack plugins?

A webpack plugin is a JavaScript object that has an apply method. This apply method is called by the webpack compiler, giving access to the entire compilation lifecycle.


1 Answers

You can add a custom plugin like:

config.plugins.push(new function() {
    this.apply = (compiler) => {
        compiler.hooks.done.tap("Log On Done Plugin", () => {
            console.log(("\n[" + new Date().toLocaleString() + "]") + " Begin a new compilation.\n");
        });
    };
});
like image 106
datou3600 Avatar answered Sep 21 '22 22:09

datou3600