啓用的WebPack熱重裝在泊塢窗應用

節點泊塢窗的應用程序 - 該項目的源代碼。它提供了位於公共文件夾中的html頁面。
的WebPack - 在節點容器手錶文件，並在代碼發生變化時更新公共文件夾（從節點容器）。
數據庫

這是的WebPack /節點容器設置

web: 
    container_name: web 
    build: . 
    env_file: .env 
    volumes: 
     - .:/usr/src/app 
     - node_modules:/usr/src/app/node_modules 
    command: npm start 
    environment: 
     - NODE_ENV=development 
    ports: 
     - "8000:8000" 

    webpack: 
    container_name: webpack 
    build: ./webpack/ 
    depends_on: 
     - web 
    volumes_from: 
     - web 
    working_dir: /usr/src/app 
    command: webpack --watch

所以目前，該容器的WebPack監控和更新公用文件夾。我必須手動刷新瀏覽器才能看到我的更改。

現在我想結合的WebPack-dev的服務器啓用自動刷新瀏覽器

這些都是我更改的WebPack配置文件

module.exports = { 
    entry:[ 
    'webpack/hot/dev-server', 
    'webpack-dev-server/client?http://localhost:8080', 
    './client/index.js' 
    ], 

    .... 

    devServer:{ 
    hot: true, 
    proxy: { 
     '*': 'http://localhost:8000' 
    } 
    } 
}

和新的泊塢窗，撰寫文件文件的WebPack

webpack: 
    container_name: webpack 
    build: ./webpack/ 
    depends_on: 
     - web 
    volumes_from: 
     - web 
    working_dir: /usr/src/app 
    command: webpack-dev-server --hot --inline 
    ports: 
     - "8080:8080"

我似乎運行應用程序

時得到一個錯誤

Invalid configuration object. Webpack has been initialised using a configuration object that does not match the API schema. 
webpack  | - configuration.entry should be one of these: 
webpack  | object { <key>: non-empty string | [non-empty string] } | non-empty string | [non-empty string] | function 
webpack  | The entry point(s) of the compilation. 
webpack  | Details: 
webpack  |  * configuration.entry should be an object. 
webpack  |  * configuration.entry should be a string. 
webpack  |  * configuration.entry should NOT have duplicate items (items ## 1 and 2 are identical) ({ 
webpack  |   "keyword": "uniqueItems", 
webpack  |   "dataPath": ".entry", 
webpack  |   "schemaPath": "#/definitions/common.nonEmptyArrayOfUniqueStringValues/uniqueItems", 
webpack  |   "params": { 
webpack  |   "i": 2, 
webpack  |   "j": 1 
webpack  |   }, 
webpack  |   "message": "should NOT have duplicate items (items ## 1 and 2 are identical)", 
webpack  |   "schema": true, 
webpack  |   "parentSchema": { 
webpack  |   "items": { 
webpack  |    "minLength": 1, 
webpack  |    "type": "string" 
webpack  |   }, 
webpack  |   "minItems": 1, 
webpack  |   "type": "array", 
webpack  |   "uniqueItems": true 
webpack  |   }, 
webpack  |   "data": [ 
webpack  |   "/usr/src/app/node_modules/webpack-dev-server/client/index.js?http://localhost:8080", 
webpack  |   "webpack/hot/dev-server", 
webpack  |   "webpack/hot/dev-server", 
webpack  |   "webpack-dev-server/client?http://localhost:8080", 
webpack  |   "./client/index.js" 
webpack  |   ] 
webpack  |  }). 
webpack  |  [non-empty string] 
webpack  |  * configuration.entry should be an instance of function 
webpack  |  function returning an entry object or a promise..

正如你看到的，我的條目對象可是沒有任何重複的項目。

有什麼額外的我應該做的事？我錯過了什麼？

的WebPack-DEV-服務器應該基本代理的所有請求節點服務器。

來源

2017-02-24 Kannaj

爲什麼添加這些條目：'webpack/hot/dev-server'， 'webpack-dev-server/client？http：// localhost：8080'？ –

@AdamWolski - 我相信這些路由是什麼允許瀏覽器建立到webpack服務器的套接字連接，以啓用自動更新 – Kannaj

即時通訊您對'入口'字段有什麼誤解，它是什麼 –

嘗試這樣做：

添加watchOptions.poll =中的WebPack配置正確。

watchOptions：{ 投票：真正 }，在devServer配置

主機
配置主機：「0.0.0.0」，

來源

2017-02-24 21:03:56

我增加了配置和瀏覽器現在自動更新..但變化沒有得到體現:(甚至沒有手動刷新後） - 你會碰巧知道錯誤可能在哪裏？控制檯顯示webpack確實更新靜態 – Kannaj

決定使用webpack-dev-middleware，而不是單獨爲單獨的webpack設置單獨的docker容器。 – Kannaj

我不能讓的WebPack或即使在將我的項目文件夾放入容器後，webpack-dev-server watch（--watch）模式也能正常工作。
要解決此問題，您需要了解webpack如何檢測目錄中的文件更改。
它採用2個軟件即添加觀看名爲inotify和fsevent文件更改操作系統級別的支持之一。標準Docker鏡像通常沒有預裝這些（特別是針對linux的inotify），因此您必須將其安裝到Dockerfile中。
查找inotify-tools包在你的發行版的包管理器，並安裝它。幸運的是所有的alpine,debian,centos都有這個。

來源

2017-10-18 07:34:27 HosseinAgha

啓用的WebPack熱重裝在泊塢窗應用

回答

相關問題