Docker容器中的Vue.js Webpack模板:如何添加Webpack-Dev-Server --watch-poll标志？

Question

我正在我创建的docker容器中运行基础Vue.js Webpack模板(https://github.com/vuejs-templates/webpack/)的webpack/webpack-dev-server部分.容器还包含vue CLI以创建新项目(如果需要,可以在此处获取我的容器:https://hub.docker.com/r/ncevl/webpack-vue/).

从webpack-simple模板移动到此模板后,热重新加载不起作用.

一切都在使用Webpack-Simple模板,您可以在这里克隆/查看:https://github.com/vuejs-templates/webpack-simple

我可以使用以下webpack-development-server启动命令运行简单模板(使用热重载按预期工作):

webpack-dev-server --hot --inline --progress --host 0.0.0.0 --watch-poll

也就是说,webpack模板的完整(非简单)版本似乎没有使用webpack-dev-server启动命令,而是使用build/dev-server.js(https:// github)中引用的其他中间件. com/vuejs-templates/webpack/blob/master/template/build/dev-server.js)和webpack dev config.

由于--watch-poll是让WDS热重载功能在上一个项目中的docker容器中工作的关键,我的想法是我需要做一些与webpack-hot-middleware类似的东西,但我看不到他们的文档中的任何内容(在这里:https://github.com/glenjamin/webpack-hot-middleware)都谈到了改为基于轮询的方法.

我不是100%肯定轮询标志会起作用,因为我可以看到容器在我做出更改时重新编译我的源代码.如果我手动刷新,我也可以在浏览器中看到更改.

如果我在chrome dev工具中检查浏览器中的页面,然后转到network/XHR我可以看到浏览器确实从webpack-dev-server接收信息,但在视觉上它不会更新.

给出上面的假设我认为websockets(或者我认为使用的socket.io)正在浏览器和WDS之间进行通信,所以这可能是某种浏览器缓存问题？

我检查了我的控制台,发现这看起来像一个标题问题:

作为参考,该图像的文本错误(为了让任何有相同问题的人更容易找到这篇文章)是:

EventSource无法加载http:// __ webpack_hmr /.请求的资源上不存在"Access-Control-Allow-Origin"标头.因此不允许来源' http://0.0.0.0:8080 '访问.

使用webpack-simple Vue.js模板时,Hot-Reload/Hot Module Reload再次使用这个相同的容器设置.

我想知道是否有人遇到类似的事情,或者对如何添加轮询选项有任何想法.我想我的替代方案是回滚到更基本的webpack配置并重建那部分东西以使用传统的webpack-dev-server/webpack配置但是给出上述我不确定是否会解决它.

Answer 1

我将此作为一个单独的答案添加,因为它更具体地回答标题中的问题,而我的其他答案更具体地解释了什么解决了我的实际问题.

vue.js webpack模板项目(可以从Vue CLI初始化,也可以从它的repo中取出:https://github.com/vuejs-templates/webpack)将其配置文件分成几个不同的目录.

我发布这个答案,以便任何遇到需要添加轮询到他们的项目的人将能够理解如何/在哪里做到这一点.

Vue.js webpack模板项目的基础项目结构如下所示:

如果您正在努力使热模块重新加载工作,那么您关心的文件与主要使用webpack-dev-middleware创建服务器有关.与此相关的最重要文件在此处突出显示:

基本上,如果要将轮询代码添加到webpack-dev-middleware服务器,则需要位于第20到24行的/build/dev-server.js文件中,如下所示:

var devMiddleware = require('webpack-dev-middleware')(compiler, {
  publicPath: webpackConfig.output.publicPath,
  quiet: true
})

要添加轮询,您可以在quiet:之前或之后添加它:true.作为旁注,如果您遇到HMR问题,我会将"quiet:true"改为queit false,以便从webpack-dev-middleware中获取更详细的信息.我在这里包含了对上面代码的详细和轮询修改:

var devMiddleware = require('webpack-dev-middleware')(compiler, {
  publicPath: webpackConfig.output.publicPath,
  quiet: false, //Changed to for additional verbosity
  watchOptions: { //Add Polling
    aggregateTimeout: 300,
    poll: 1000 
  }
})

我的另一个答案是关于什么最终解决我的问题,不一定是如何实际添加轮询(这可能是其他人可能需要但最终不需要使我的dockerized设置工作).

还应该注意的是,有时当HMR(webpack热模块重新加载)未检测到更改时,这是由于webpack-hot-middleware或webpack-dev-middleware正在遇到一个问题,其中添加了一些不可见的字符到基础项目目录的名称(可能由构建基础Vue项目的人),因此某些操作系统上的webpack无法看到更改.

如果您遇到这种情况并且您在OSx上或在docker容器内运行webpack并且您无法让HMR检测到更改,请尝试重命名您的vue-webpack项目目录,它应该可以正常工作.