I have a web project with a working Webpack4 config using webpack-dev-server
with HMR enabled and started this way via npm script:
cross-env NODE_ENV=development webpack-dev-server --inline --hot
All is OK, HMR works for my js and scss files. Now I'm wondering if it's possible to extend my Webpack config to have a full reload in the browser when I modify a view template file.
It seems for me that webpack-dev-server
can't do this on its own, so I think I need some other plugin. After googling a bit this is I've got:
- webpack-dev-server + browser-sync-webpack-plugin
- rewrite my config to webpack-serve as it seems it can do it
- chokidar + webpack-dev-middleware (API for reloading?)
So my question is what is the best way to get HMR + watch given paths and reload browser on file change (blade/twig/php/etc...) with Webpack 4(.17.2) ?
Relevant part of my current config:
devServer: {
index: '',
open: true,
hotOnly: true,
publicPath: '/build/',
host: 'mysite.test',
proxy: {
'**': {
target: 'http://mysite.test',
changeOrigin: true,
headers: {
'X-Dev-Server-Proxy': 'http://mysite.test'
}
}
}
}
Answering myself, maybe others can benefit from it. Just to note: I have a Laravel project and I'm using Webpack4 for bundling it instead of its own Laravel Mix solution. My test Laravel site is served by nginx on mysite.test
1) webpack-dev-server + BrowserSync
Works great, BrowserSync has many good features, i like it! The only disadvantage is that it creates another proxy on top of Webpack's devserver. You can try it following these steps:
Install the browser-sync-webpack-plugin as described, then:
2) webpack-serve
Not on option anymore since webpack-contrib/webpack-serve went deprecated.
3) webpack-dev-server + Chokidar
Finally I started using this. Simple and fast. Chokidar is a file watcher, it's also used by Webpack's devserver internally for watching files. You may already have it in your
node_modules
but if not, install it withnpm
oryarn
.Here's my whole devServer config I originally wanted. CSS injection and Javascript changes handled by HMR and when a view file changes, devserver makes the browser reload automatically:
Tested on Webpack 4.19.1