I tried in webpack encore to configure dev-server for hot reload. After making changes and pressing ctrl + s, the page refreshes and you can see the changes. But is it possible to make the changes visible without refreshing the page? The application is put in docker containers.
let config = Encore.getWebpackConfig();
config.cache = {
type: 'filesystem',
cacheDirectory: `${__dirname}/.webpack-cache`,
};
config.devServer = {
host: '0.0.0.0',
port: 8080,
hot: true,
watchFiles: ['assets/**/*'],
liveReload: false,
open: false,
allowedHosts: 'all',
headers: {
'Access-Control-Allow-Origin': '*',
},
devMiddleware: {
writeToDisk: false,
},
client: {
overlay: false,
logging: 'info',
progress: true,
},
};
module.exports = config;
after writing this code I thought that hot reload would work without refreshing the page
let config = Encore.getWebpackConfig();
config.cache = {
type: 'filesystem',
cacheDirectory: `${__dirname}/.webpack-cache`,
};
config.devServer = {
host: '0.0.0.0',
port: 8080,
hot: true,
watchFiles: ['assets/**/*'],
liveReload: true,
open: false,
allowedHosts: 'all',
headers: {
'Access-Control-Allow-Origin': '*',
},
devMiddleware: {
writeToDisk: false,
},
client: {
overlay: false,
logging: 'info',
progress: true,
},
};
module.exports = config;
You forgot to update the liveReload key to true. Also check the watchFiles: ['assets/**/*']. It should point to src folder,
Reference: Document
Sample code`
.configureDevServerOptions(options => {
options.liveReload = true;
options.static = {
watch: false
};
options.watchFiles = {
paths: ['src/**/*.php', 'templates/**/*'],
};
})`
Hope this will help you