Node.js Webpack 4 devServer HMR加上对其他文件更改（如视图）的完全重新加载

我有一个web项目，使用启用HMR的

webpack dev server

使用Webpack4配置，并通过npm脚本以这种方式启动：

cross-env NODE\u-env=dev-server-inline-hot开发网页包

一切正常，HMR适用于我的js和scss文件。现在我想知道，当我修改视图模板文件时，是否可以扩展我的Webpack配置以在浏览器中完全重新加载

对我来说，
webpack-dev-server
似乎无法单独完成这项工作，所以我想我需要一些其他插件。在谷歌搜索了一下之后，我得到了：

+
将我的配置重写为
+（用于重新加载的API？）
所以我的问题是，用Webpack4（.17.2）获得HMR+监视给定路径并在文件更改（blade/twig/php/etc…）时重新加载浏览器的最佳方法是什么

我当前配置的相关部分：

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'
      }
    }
  }
}

回答我自己，也许其他人可以从中受益。请注意：我有一个Laravel项目，我使用Webpack4捆绑它，而不是它自己的Laravel混合解决方案。我的test Laravel站点由nginx在mysite.test上提供服务

1）网页包开发服务器+浏览器同步

作品很棒，有很多好的功能，我很喜欢！唯一的缺点是它在Webpack的devserver上创建了另一个代理。您可以按照以下步骤进行尝试：

按照说明安装，然后：

const BrowserSyncPlugin = require('browser-sync-webpack-plugin');

// Webpack config, plugins section
plugins: [
  new BrowserSyncPlugin({
    host: "mysite.test",
    port: 3000,
    proxy: "mysite.test:8080",
    open: "external",
    files: [
      './resources/views/**/*.blade.php'
    ]
  },{
    // prevent BrowserSync from reloading the page
    // and let Webpack Dev Server take care of this
    reload: false
  })
]

2）网页服务

自从被弃用后，不再使用选项

3）网页包开发服务器+Chokidar

最后我开始使用这个。简单快速。是一个文件监视程序，它也被Webpack的devserver内部用于监视文件。您的
node\u模块中可能已经有了它，但如果没有，请使用
npm
或
warn
安装它

这是我最初想要的整个devServer配置。CSS注入和Javascript更改由HMR处理，当视图文件更改时，devserver会自动重新加载浏览器：

const chokidar = require('chokidar');

// Webpack's devServer config
devServer: {
  before(app, server) {
    chokidar.watch([
      './resources/views/**/*.blade.php'
    ]).on('all', function() {
      server.sockWrite(server.sockets, 'content-changed');
    })
  },
  index: '',
  open: true,
  host: 'mysite.test',
  proxy: {
    '**': {
      target: 'http://mysite.test',
      changeOrigin: true,
      headers: {
        'X-Dev-Server-Proxy': 'http://mysite.test'
      }
    }
  }
}

在Webpack 4.19.1上测试
感谢您发布解决方案。找到它是因为我也在做同样的事情！关于这件事的信息太少了。我们不能是唯一一个谁是混合后端和前端的网页！我现在正在吻你。。两天来我一直在努力想这个问题。你知道那种怪人的感觉，你只需要把事情弄清楚？哦，我的上帝，谢谢你！！！！PS：取消手表功能对性能有很大帮助！：）