title: Webpack 4 devServer HMR plus full reload on other file changes (like views)
body: <p>I have a web project with a working Webpack4 config using <code>webpack-dev-server</code> with HMR enabled and started this way via npm script:</p>
  
  <p><code>cross-env NODE_ENV=development webpack-dev-server --inline --hot</code></p>
  
  <p>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.</p>
  
  <p>It seems for me that <code>webpack-dev-server</code> can't do this on its own, so I think I need some other plugin. After googling a bit this is I've got:</p>
  
  <ol>
  <li><a href="https://webpack.js.org/configuration/dev-server/" rel="nofollow noreferrer">webpack-dev-server</a> + <a href="https://www.npmjs.com/package/browser-sync-webpack-plugin" rel="nofollow noreferrer">browser-sync-webpack-plugin</a></li>
  <li>rewrite my config to <a href="https://github.com/webpack-contrib/webpack-serve" rel="nofollow noreferrer">webpack-serve</a> as it seems <a href="https://github.com/webpack-contrib/webpack-serve/blob/master/docs/addons/watch-content.config.js" rel="nofollow noreferrer">it can do it</a></li>
  <li><a href="https://github.com/paulmillr/chokidar" rel="nofollow noreferrer">chokidar</a> + <a href="https://github.com/webpack/webpack-dev-middleware" rel="nofollow noreferrer">webpack-dev-middleware</a> (API for reloading?)</li>
  </ol>
  
  <p>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) ?</p>
  
  <p>Relevant part of my current config:</p>
  
  <pre><code>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'
        }
      }
    }
  }
  </code></pre>