reload browser when hash is changed but no modules was updated

[alexander-akait]

@alexander-akait Thanks for the feedback!

I have completely removed the staticOptions and setup the directory for my static files. I also removed wds + src watch content base (old) option. After that, all edited twig files triggers a new compilation, but still no browser reload. With hot: false, it works, weird 🤔

Then I have set the watchFiles option to ['src/**/*.twig'] with hot: true: it works!
Every file change trigger a compilation and browser reload.

Is that configuration looks fine to you or should I share my private repo with you for further check?
Thanks a lot mate 😉

Originally posted by @xavierfoucrier in #2758 (comment)

ref: webpack-contrib/copy-webpack-plugin#674

[alexander-akait]

@xavierfoucrier but here some limitations, if you have copy-webpack-plugin or plugins which added files to compilation, hash was changed too, but not each file require reload browser...

[xavierfoucrier]

Sure. In my case I will probably drop the copy-webpack-plugin, for now I will stick with the watchFiles option and wait to test this feature to be implemented.

[liby]

@alexander-akait
I'd like to ask a digression. If we just want to enable Live Reload, how to configure it? Like this?

module.exports = {
  //...
  devServer: {
    static: {
      directory: path.join(__dirname, "dist"),,
      // watch: true,
    },
    watchFiles: ["src/**/*"],
    hot: false,
  },
};

The above configuration works, but I still have a few questions:

1. Do we need to set watch: true? Does it conflict with watchFiles? After all, if the file changes, the project will be rebuilt and the "dist" file will naturally change as well.
2. Similar to the first point, in my case, is it enough to set only one of devServer.static.watch and devServer.watchFiles?
3. The reason for setting hot: false is that without this line, the console would output the following:

   [HMR] Waiting for update signal from WDS...   VM3367 log.js:24 
   [HMR] Waiting for update signal from WDS...   VM3668 log.js:24
   [HMR] Waiting for update signal from WDS...     log.js?7596:24
   

   I don't have the HMR plugin installed, and I don't know why the default value for hot is not false, so would it be better for me to set it explicitly?

[alexander-akait]

As was described in migration guide, you should use watchFiles, webpack don't know is this modules with hot or just copied file

[alexander-akait]

static !== dist, webpack-dev-middleware handle webpack files, static is like public directory in your project and it is watched by default (because you can change favicon.ico/index.html when it was created manually and etc files)

[alexander-akait]

watchFiles just watch files and reload browser when something was changed

[liby]

As was described in migration guide, you should use watchFiles, webpack don't know is this modules with hot or just copied file

Okay.

static !== dist, webpack-dev-middleware handle webpack files, static is like public directory in your project and it is watched by default (because you can change favicon.ico/index.html when it was created manually and etc files)

This is a configuration inherited from v3. In the v3 version of the official website documentation example, the contentBase is set like this:

var path = require('path');

module.exports = {
  //...
  devServer: {
    contentBase: path.join(__dirname, 'dist'),
    compress: true,
    port: 9000
  }
};

So the previous setting of contentBase to dist should mimic the setting of the official example. The reason why it continues to be written this way in v4 is that the migration guide doesn't describe the changes to static options in detail (it doesn't even clarify the relationship between the old and new fields in the two versions), so it just renames contentBase to directory.

[alexander-akait]

You can set dist as static, but it is unnecessary in most of cases, you have public part of your application, and it is static

[liby]

@alexander-akait
Oh, I almost forgot to ask. We seem to have missed something.

The reason for setting hot: false is that without this line, the console would output the following:

[HMR] Waiting for update signal from WDS...   VM3367 log.js:24 
[HMR] Waiting for update signal from WDS...   VM3668 log.js:24
[HMR] Waiting for update signal from WDS...     log.js?7596:24

Do I need to set hot: false?

[alexander-akait]

Can you provide example of the problem? I think you should not disable hot

[liby]

@alexander-akait
You can take a look at this.

[liby]

@alexander-akait PTAL🙏

[alexander-akait]

@liby What is the problem, reload is working for you, hot will not because you don't have hot code for your application

[liby]

@alexander-akait
Oh, I almost forgot to ask. We seem to have missed something.

The reason for setting hot: false is that without this line, the console would output the following:

[HMR] Waiting for update signal from WDS...   VM3367 log.js:24 
[HMR] Waiting for update signal from WDS...   VM3668 log.js:24
[HMR] Waiting for update signal from WDS...     log.js?7596:24

Do I need to set hot: false?

@alexander-akait The problem is that these descriptions.

If I do not set hot: false, I will see the following when I open the console:

[HMR] Waiting for update signal from WDS...   VM3367 log.js:24 
[HMR] Waiting for update signal from WDS...   VM3668 log.js:24
[HMR] Waiting for update signal from WDS...     log.js?7596:24

But obviously, I didn't explicitly turn on HMR in my configuration, there are no plugins installed. I also mentioned this problem at the beginning, as shown in the picture below.

I wonder why the console outputs this information, and I don't know if I want to set false to prohibit them from being output to the console.

[alexander-akait]

I can't reproduce, please provide all steps, reload is working with hot: true and hot: false