CODEWITHSUNDEEP
webpack
alt
alt

Reputation: 2606

Is it possible to have webpack-server trigger a page refresh on other file changes?

I have webpack-server configured to build my .js and .scss and it currently refreshes my page when I make changes.

Is it possible to have this happen when I change non-webpackable files such as html templates and php files?

I effectively want to watch a whole directory and tell webpack-server to reload when a file changes.

Upvotes: 7

Views: 3120

Answers (3)

karloskar
karloskar

Reputation: 2171

Having the same question as the OP I managed to get it working by simply using the watchFiles option.

devServer: {
  watchFiles: ["./some/files/to/watch/**/*.php"]
}

While the middleware way is still available it's not needed for the basic cases.

Upvotes: 6

Timo Schwarzer
Timo Schwarzer

Reputation: 409

Adding to @ARS81's answer, for webpack 5 the message and the method to send messages changed a bit:

devServer: {
  onBeforeSetupMiddleware(server) {
    chokidar.watch([
      '/some/files/to/watch/*.html',
    ]).on('all', function () {
      for (const ws of server.webSocketServer.clients) {
        ws.send('{"type": "static-changed"}')
      }
    })
  },
},

Upvotes: 2

szegheo
szegheo

Reputation: 4425

Unfortunately there's no option (currently) for watching external files and do just a page reload on change, but there are workarounds:

With Chokidar (easiest)

I found it here and is working great for me. It needs chokidar but webpack-dev-server uses it also internally, so it should be already installed. If not, install it with npm or yarn.

So first require chokidar (maybe at the top of your webpack.config.js):

const chokidar = require('chokidar');

.. and the simplest way to achieve what you want is just a few lines added to the devServer config:

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');
    })
  },

With BrowserSync

BrowserSync is a great tool for web developers with a lot of goods. There's a webpack plugin which we need to install first with npm or yarn. It can operate well with webpack-dev-server together, but it creates an other proxy over devserver.

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

and then in your plugins config:

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

Upvotes: 9

Related Questions