是否可以让 webpack-server 在其他文件更改时触发页面刷新？

Question

我已webpack-server配置为构建我的 .js 和 .scss，当我进行更改时，它当前会刷新我的页面。

当我更改非 webpackable 文件（例如 html 模板和 php 文件）时，是否可能发生这种情况？

我实际上想查看整个目录并告诉 webpack-server 在文件更改时重新加载。

Answer 1

不幸的是，没有选项（当前）用于观看外部文件，并且只在更改时重新加载页面，但有解决方法：

使用 Chokidar（最简单）

我在这里找到了它并且对我很有用。它需要chokidar但 webpack-dev-server也在内部使用它，所以它应该已经安装了。如果没有，请使用 npm 或 yarn 安装它。

所以首先需要 chokidar（可能在你的 webpack.config.js 的顶部）：

const chokidar = require('chokidar');

.. 实现你想要的最简单的方法就是在 devServer 配置中添加几行：

devServer: {
  before(app, server) {
    chokidar.watch([
      './resources/views/**/*.blade.php' // watch all my laravel view templates
    ]).on('all', function() {
      server.sockWrite(server.sockets, 'content-changed');
    })
  },

使用浏览器同步

BrowserSync对于拥有大量商品的 Web 开发人员来说是一个很棒的工具。有一个 webpack插件，我们需要先用 npm 或 yarn 安装它。它可以与 webpack-dev-server 一起运行良好，但它会在 devserver 上创建另一个代理。

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

然后在你的插件配置中：

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