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

Question

我正在运行设置 webpack / webpack-dev-server 基本 Vue.js Webpack 模板的部分 (https://github.com/vuejs-templates/webpack/) inside of a docker container I created. The container also contains the vue CLI in order to create new projects (you can get my container here if you want: https://hub.docker.com/r/ncevl/webpack-vue/)。

Hot-reload does not work after moving from the webpack-simple template to this one.

一切都在使用 Webpack-Simple 模板，您可以在此处克隆/查看该模板：https://github.com/vuejs-templates/webpack-simple

我能够使用以下 webpack-development-server 启动命令获得简单模板运行ning（hot-reload 按预期工作）：

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 开发配置。

由于 --watch-poll 是让 WDS hot-reload 功能在上一个项目中的 docker 容器中工作的关键，我的想法是我需要做与 webpack-hot-middleware 类似，但我在他们的文档（此处：https://github.com/glenjamin/webpack-hot-middleware）中没有看到任何关于更改为基于轮询的方法的内容。

I am not 100% sure the polling flag will do the trick since I can see the container recompile my source when I make a change. I can also see the change in my browser if I refresh it manually.

Whats stranger still is if I inspect my page in browser within chrome dev tools, and then head over to network / XHR I can see that the browser actually does receive information from the webpack-dev-server, but visually it does not update.

给出以上我假设 websockets（或我认为使用的 socket.io）正在浏览器和 WDS 之间工作和通信所以这可能是某种浏览器缓存问题?

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

作为参考，该图片中的文本错误（让有相同问题的人更容易找到这个 post）是：

EventSource cannot load http://__webpack_hmr/. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://0.0.0.0:8080' is therefore not allowed access.

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

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

Answer 1

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

基督徒说：

I was just trying the same. I just use "php artisan serve" on localhost:8000, and Webpack Dev Server on localhost:3000. You should make this:

set your webpack config "output.publicPath" as "http://localhost:3000/static/" instead of "/static/"

make your php application load this:

The key is the output.publicPath being absolute. Now, you should run "php artisan serve" and launch your webpack dev server too (in my case I use gulp).

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

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

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

与之前的设置相反，它不起作用并且看起来像这样：

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

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

Answer 2

我将其添加为一个单独的答案，因为它更具体地回答了标题中的问题，而我的另一个答案更具体地解释了解决我的实际问题的原因。

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

I am posting this answer so that anyone who runs into the need to add polling to their project will be able to understand how / where to do that.

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

要添加轮询，您可以在 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 无法看到更改。

If that happens to you and you are on OSx or running webpack inside of a docker container and you can't get HMR to detect changes, try to rename your vue-webpack project directory and it should work.

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

Vue.js Webpack Template in a Docker Container: How do I add Webpack-Dev-Server --watch-poll flag?

node.js

docker

webpack

vue.js

webpack-dev-server