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

Question

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

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 as it seems it can do it
chokidar + webpack-dev-middleware（API 重装？）

所以我的问题是使用 Webpack 4(.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'
      }
    }
  }
}

Answer 1

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

上提供服务

1) webpack-dev-server + BrowserSync

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

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

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) webpack-serve

自从 webpack-contrib/webpack-serve 已被弃用后，不再可选。

3) webpack-dev-server + Chokidar

我终于开始使用它了。简单快捷。 Chokidar 是一个文件观察器，Webpack 的 devserver 内部也使用它来观察文件。您可能已经在 node_modules 中安装了它，但如果没有，请使用 npm 或 yarn.

安装它

这是我最初想要的整个 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 上测试

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

Webpack 4 devServer HMR plus full reload on other file changes (like views)

node.js

livereload

webpack

browser-sync

webpack-serve