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，簡單的模板，你可以克隆工作/看在這裏：https://github.com/vuejs-templates/webpack-simple

我能得到簡單的模板運行（與熱重載發揮預期）具有以下的WebPack開發服務器啓動命令：

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

提到的WebPack模板的完整（不簡單）版本不會出現使用的WebPack-DEV-服務器啓動命令，而是出現使用額外的中間件參考在build/dev-server.js（ https://github.com/vuejs-templates/webpack/blob/master/template/build/dev-server.js）和webpack dev配置。

由於--watch-poll是讓WDS熱重載功能在最後一個項目的Docker容器中工作的關鍵，我的想法是我需要做一些類似於webpack-hot-middleware但我沒有看到他們的文檔中的任何內容（在這裏：https://github.com/glenjamin/webpack-hot-middleware），談論改變爲基於輪詢的方法。

我不是100％確定輪詢標誌會做的伎倆，因爲我可以看到容器重新編譯我的來源，當我做出改變。如果手動刷新，我還可以在瀏覽器中看到更改。

還有什麼奇怪的是，如果我在瀏覽器中使用chrome開發工具檢查我的頁面，然後轉到網絡/ 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初始化或從其回購中取出：https://github.com/vuejs-templates/webpack）將其配置文件分成幾個不同的目錄。

我發佈這個答案，以便任何人遇到需要添加投票到他們的項目將能夠了解如何/在哪裏做到這一點。

的Vue.js的WebPack模板項目的基本項目的結構是這樣的：

你關心，如果你試圖讓熱模塊重裝工作都搞亂的文件與使用webpack-dev-middleware主要創建服務器相關。基本上，如果你想投票代碼添加到您需要在/ build中的/ dev-服務器的WebPack-DEV-中間件服務器

：相關的最重要的文件，以在此處突出。 js文件的行20到24，看起來像這樣：

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

要添加輪詢，你可以在quiet：true之前或之後添加輪詢。請注意，如果您在使用HMR時遇到問題，我會將「quiet：true」更改爲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 hot模塊重新加載）未檢測到更改時，這是由於webpack-hot-middleware或webpack-dev-middleware遇到一個問題，即一些不可見字符被添加到基本項目目錄的名稱（可能由構建基本Vue項目的人員），因此某些操作系統上的webpack無法看到更改。

如果這發生在你身上，你是在OSX或運行的泊塢窗容器內的WebPack，你不能得到HMR檢測到的變化，嘗試重命名你的VUE-的WebPack項目目錄，它應該工作。

Answer 2

好的。所以我真的不能採取信用爲這一個，因爲它是由用戶討論克里斯蒂安帕利亞雷斯在這裏居然回答：http://webpack.github.io/docs/webpack-dev-server.html#combining-with-an-existing-server

Christian說：

我只是想一樣。我只在localhost：8000上使用「php artisan serve」，在localhost：3000上使用Webpack Dev Server。你應該讓這樣的：

• 設置你的WebPack配置 「output.publicPath」 爲 「http://localhost:3000/static/」 而不是 「/靜態/」
• 讓你的PHP應用程序加載此：

的關鍵是output.publicPath是絕對的。現在，您應該運行「php artisan serve」並啓動您的webpack dev服務器（在我的情況下，我使用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模板時更改熱重載。