Question

我有一个包含以下容器的泊坞窗应用

节点 - 项目的源代码。它提供位于公共文件夹中的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-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基本上应该代理对节点服务器的所有请求。

Answer 1

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

Answer 2

尝试这样做：

在webpack config中添加watchOptions.poll = true。

watchOptions：{ 民意调查：是的 }，
在devServer config中配置主机

宿主：＆＃34; 0.0.0.0＆＃34;，

Answer 3

Docker＆amp; webpack-dev-server可以在没有任何中间件或插件的情况下完全运行，正确的配置就是交易：

devServer: {
  port: 80, // use any port suitable for your configuration
  host: '0.0.0.0', // to accept connections from outside container
  watchOptions: {
      aggregateTimeout: 500, // delay before reloading
      poll: 1000 // enable polling since fsevents are not supported in docker
  }
}

Answer 4

我遇到了同样的问题。这更多是我的错，而不是 webpack 或 docker。实际上，您必须检查 Dockerfile 中的 workdir 是否是 docker-compose.yml 中 bindmount 的目标

Dockerfile

FROM node
...
workdir /myapp
...

在你的 docker-compose.yml 上

web:
   ....
   -volumes:
        ./:/myapp

如果您在 webpack.config.js 上配置重新加载，它应该可以工作

Answer 5

就我而言，我有一个VueJS应用程序。我按照帖子Enabling Hot-Reloading with vuejs and vue-cli in Docker中的教程进行操作。我的解决方案是使用以下命令修改我的dockerfile：

 FROM node:lts-alpine
 ...
 RUN yarn global add @vue/cli
 ...

它允许容器检测到我的代码中的更改并重新加载到我的浏览器中。就我而言，不必使用devServer创建vue.config.js。

在docker应用程序中启用webpack热重载

5 个答案: