node.js - 在 docker 应用程序中启用 webpack 热重载

Question

我有一个带有以下容器的 docker 应用

1. Node - 项目的源代码。它提供位于公共(public)文件夹中的 html 页面。
2. webpack - 监视 Node 容器中的文件并在代码发生变化时更新公共(public)文件夹(从 Node 容器)。
3. 数据库

这是 webpack/node 容器设置

 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-server 以在浏览器中启用自动刷新

这些是我对 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'
    }
  }
}

和新的 docker-compose 文件 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-server 基本上应该将所有请求代理到 Node 服务器。

Answer 1

即使将我的项目文件夹安装到容器中，我也无法使 webpack 或 webpack-dev-server watch (--watch) 模式工作。
要解决此问题，您需要了解 webpack 如何检测目录中的文件更改。
它使用 2 种软件中的一种来添加操作系统级别的支持以监视文件更改，称为 inotify 和 fsevent。标准 Docker 镜像通常没有预安装这些(特别是 inotify for linux)，因此您必须将其安装在 Dockerfile 中。
在您的发行版包管理器中查找 inotify-tools 包并安装它。幸运的是所有 alpine, debian, centos 都有这个。