Question

我有一个使用webpack-dev-server且启用了HMR且具有有效Webpack4配置的Web项目，并通过npm脚本以这种方式启动：

cross-env NODE_ENV=development webpack-dev-server --inline --hot

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

在我看来webpack-dev-server不能单独做到这一点，所以我认为我需要一些其他插件。谷歌搜索了一下之后，我得到了：

webpack-dev-server + browser-sync-webpack-plugin
将我的配置重写为webpack-serve，it can do it
chokidar + webpack-dev-middleware（要重新加载的API吗？）

所以我的问题是，使用Webpack 4（.17.2）获取HMR +监视给定路径并在文件更改（刀片/ 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'
      }
    }
  }
}

Answer 1

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

1）webpack-dev-server + BrowserSync

效果很好，BrowserSync具有许多不错的功能，我喜欢它！唯一的缺点是，它在Webpack的devserver之上创建了另一个代理。您可以按照以下步骤尝试：

按照说明安装browser-sync-webpack-plugin，然后：

$MainMenu_Updates.Add_Click({$AdminTool.Refresh()})

2）webpack-serv

自webpack-contrib/webpack-serve被弃用以来，不再处于选择状态。

3）webpack-dev-server + Chokidar

最后，我开始使用它。简单快捷。 Chokidar是一个文件监视程序，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 }) ]中安装了它，但如果没有，请使用node_modules或npm安装它。

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

yarn

在Webpack 4.19.1上测试

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

1 个答案: