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中引用的其他中间件（{{3和webpack dev config。

由于--watch-poll是让WDS热重载功能在上一个项目中的docker容器中工作的关键，我的想法是我需要做一些类似于webpack-hot-middleware但是我在他们的文档中没有看到任何内容（在这里：https://github.com/vuejs-templates/webpack/blob/master/template/build/dev-server.js），它涉及改变基于轮询的方法。

我不是百分之百确定轮询标志会起作用，因为我可以看到容器在我做出更改时重新编译我的源代码。如果我手动刷新，我也可以在浏览器中看到更改。

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

上面我假设websockets（或者我认为使用的socket.io）正在浏览器和WDS之间进行通信，所以这可能是某种浏览器缓存问题吗？ < / p>

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

https://github.com/glenjamin/webpack-hot-middleware

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

EventSource无法加载。 No＆＃39; Access-Control-Allow-Origin＆＃39;标头出现在请求的资源上。起源＆＃39; http://__webpack_hmr/＆＃39;因此不允许访问。

使用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项目目录，它应该可以正常工作。

Answer 2

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

克里斯蒂安说：

我只是尝试了同样的事情。我只在localhost：8000上使用“php artisan serve”，在localhost：3000上使用Webpack Dev Server。你应该这样做：


将您的webpack配置“output.publicPath”设置为“http://localhost:3000/static/”而不是“/ static /”

让你的php应用程序加载：


关键是output.publicPath是绝对的。现在，您应该运行“php artisan serve”并启动您的webpack开发服务器（在我的情况下，我使用gulp）。

基本上我接受了这个并挖掘了Vue.js Webpack模板文件，找到了webpack正在寻找公共路径的配置文件。公共路径设置最终位于模板的/ config目录中的index.js文件中。

我将代码更改为：

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

与之前没有工作的设置相反，看起来像这样：

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

之后，我能够在我的docker容器中运行vue.js Webpack模板时看到我的更改热重载。

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

2 个答案: