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

Question

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

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

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

Answer 1

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

使用 Chokidar(最简单)

我找到了 here并且对我很有用。需要chokidar但是 webpack-dev-server uses它也在内部，所以它应该已经安装了。如果没有，请使用 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

BrowserSync对于拥有大量商品的 Web 开发人员来说，它是一个很棒的工具。有一个 webpack plugin我们需要先用 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
  })