Webpack: Npm Run Dev: Modify Vue Webpack Template Dev Server to use --watch-poll

[necevil]

I am running the webpack portion of this template stack inside of a docker container I created, which also contains the vue CLI (https://hub.docker.com/r/ncevl/webpack-vue/). However, hot-reload does not work after moving from the webpack-simple template to this one.

Everything was working using the Webpack-Simple template which you can see over here: https://github.com/vuejs-templates/webpack-simple

I was able to get the simple template running (with hot-reload working as intended) with the following webpack-development-server launch command:
webpack-dev-server --hot --inline --progress --host 0.0.0.0 --watch-poll

The full version of the webpack template does not appear to use a webpack-dev-server launch command and instead appears to use additional middleware as referenced in build/dev-server.js (https://github.com/vuejs-templates/webpack/blob/master/template/build/dev-server.js) and the webpack dev config.

Since the --watch-poll was the key to getting the WDS hot-reload functionality to work within a docker container in the last project, my thinking is that I need to do something similar with the webpack-hot-middleware but I dont see anything in their docs (over here: https://github.com/glenjamin/webpack-hot-middleware) that talks about changing to a polling based approach.

I am wondering if anyone has run into anything similar or has any ideas. I guess my alternative would be roll back to a more basic webpack config and rebuild that portion of things to use the traditional webpack-dev-server.

[LinusBorg]

Watching is The job of webpack-dev-middleware.

You can see the poll option in the example config here:

https://github.com/webpack/webpack-dev-middleware/blob/master/README.md

[LinusBorg]

@necevil does that answer your question?

[necevil]

@LinusBorg Yep!
Thanks for pointing me in the right direction, the portion that I ended up needing (incase anyone else stumbles on this thread) was to add the following to the webpack-dev-middleware config:

    watchOptions: {
        aggregateTimeout: 300,
        poll: true
    },

As it turned out I was able to make it work WITHOUT the above, but when I went to deploy my same configuration to some of our other team members they required the above polling modification to make the dockerized webpack-dev-middleware server aware of changes to files on the local host / docker volume.

Without the above wdm would not notice the changes and trigger a new build, with the above added everything worked as intended.

For those who are confused as to exactly where to add that snippet, it needs to go inside of the dev-server.js file which is located inside of the build directory within this template. The code block you are looking to modify should end up looking like this (around line 22-24ish):

var devMiddleware = require('webpack-dev-middleware')(compiler, {
  publicPath: webpackConfig.output.publicPath, //was publicPath: webpackConfig.output.publicPath,
  quiet: true,
  watchOptions: {
      aggregateTimeout: 300,
      poll: 1000
  }
})

Thanks Linus!

[matthewpennell]

Thanks @necevil - your comment seems to be the only place on the entire web that concisely explains how to make this work. 👍

[necevil]

Stoked to hear it @matthewpennell

Hoping took notes to document for the team, hoping to blog it eventually but this is pretty much the nuts and bolts of the tricky portion.

[idhamhafidz]

I ignore running npm run dev in vagrant ssh. Just use normal terminal

[ghost]

thanks @necevil
Can conform fix worked in my vagrant env as well.

[alexsandro-xpt]

Thank all, work for me.

[arthuralmeidap]

@necevil Thanks!! That's worked for me too!

[ghost]

Thx.

[heronrs]

Currently running vue-cli v 2.9.1 and what worked for me was setting poll: 500 on conf/index.js

    errorOverlay: true,
    notifyOnErrors: true,
    poll: 500, // https://webpack.js.org/configuration/dev-server/#devserver-watchoptions-

If loading your app is taking too long on the browser, set it to a higher number like 1000, 1500

[shahidkarimi]

The webpack.mix file is a hell of code where to place this code

var devMiddleware = require('webpack-dev-middleware')(compiler, { publicPath: webpackConfig.output.publicPath, //was publicPath: webpackConfig.output.publicPath, quiet: true, watchOptions: { aggregateTimeout: 300, poll: 1000 } })