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

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

1 个答案: