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

Question

我正在我创建的docker容器中运行基本Vue.jsWebpack模板（https://github.com/vuejs-templates/webpack/）的webpack/webpack-dev-server部分。该容器还包含vue CLI以创建新项目（如果您愿意，您可以在此处获取我的容器：https://hub.docker.com/r/ncevl/webpack-vue/）。

从webpack-simple模板移至此模板后，热重新加载不起作用。

一切都在使用Webpack简单模板工作，您可以在此处克隆/查看：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/web pack/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开发工具中检查浏览器中的页面，然后转到网络/ XHR，我可以看到浏览器实际上确实从webpack-dev-server接收信息，但视觉上它不会更新。

鉴于上述情况，我假设webockets（或我认为使用的socket.io）正在浏览器和WDS之间工作和通信，因此这可能是某种浏览器缓存问题？

我检查了我的控制台，发现了这个问题，所以看起来像是一个标题问题：

作为参考，该图像中的文本错误（为了让任何有相同问题的人更容易找到这篇文章）是：

EventSource无法加载http://__webpack_hmr/。请求的资源上没有“Access-Control-Allow-Origin”标头。因此，不允许访问源“http://0.0.0.0:8080”。

当使用webpack简单Vue.js模板时，热重装/热模块重装再次使用这个相同的容器设置。

我想知道是否有人遇到过类似的事情，或者对如何添加轮询选项有任何想法。我想我的替代方案是回滚到更基本的webpack配置，并重新构建该部分内容以使用传统的webpack-dev-server / webpack配置，但给出上述内容我不确定是否会修复它。

Answer 1

好的。所以我真的不能为这个负责，因为它实际上是由这里的讨论用户Cristian Pallarés回答的：http://webpack.github.io/docs/webpack-dev-server.html#combining-with-an-existing-server

克里斯蒂安说:

我只是在尝试同样的方法。我只是在localhost:8000上使用“php artisan service”，在localhost:3000上使用Webpack Dev Server。您应该这样做：

• 将您的webpack配置output.publicPath设置为http://localhost:3000/static/而不是静态
• 让您的php应用程序加载这个：

关键是输出。公共路径是绝对的。现在，您应该运行“php artisan Service”并启动webpack开发服务器（在我的例子中，我使用gulp）。

基本上，我把它挖出来，挖掘了Vue.js Webpack模板文件，以找到webpack正在寻找公共路径的配置文件。公共路径设置最终位于模板的 /config 目录中的索引.js文件中。

我将代码更改为如下所示：

    assetsSubDirectory: 'http://localhost:8080/static/',  //!!Changed from /static/
    assetsPublicPath: 'http://localhost:8080/', //!!Changed from /

与之前的设置不同，它不起作用，看起来像这样：

    assetsSubDirectory: '/static/',  
    assetsPublicPath: '/',

之后，我能够看到我的更改热重新加载，同时从我的docker容器中运行vue.jsWebpack模板。

Answer 2

我把它作为一个单独的答案添加进来，因为它更具体地回答了标题中的问题，而我的另一个答案更具体地解释了是什么解决了我的实际问题。

vue.js webpack 模板项目（可以从 Vue CLI 初始化，也可以从此处的存储库中提取：https://github.com/vuejs-templates/webpack）将其配置文件分成几个不同的目录。

我发布这个答案是为了让任何需要在项目中添加投票的人能够明白如何/在哪里添加投票。

Vue的基本项目结构。js webpack模板项目如下所示：

如果您试图让热模块重新加载工作，那么您关心的文件与主要使用webpack-dev-middleware创建您的服务器有关。这里突出显示了与此相关的最重要的文件:

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

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

要添加轮询，您可以在安静之前或之后添加它：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 
  }
})

我的另一个答案是关于什么最终解决了我的问题，而不一定是如何实际添加轮询（这对于其他人可能是必要的，但最终不需要使我的停靠设置工作）。

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

如果这种情况发生在你身上，你在OSx上或者在docker容器中运行webpack，你不能让HMR检测到变化，尝试重命名你的vue-webpack项目目录，它应该工作。