在Docker应用程序中启用Webpack热重装 [英] Enabling webpack hot-reload in a docker application

问题描述

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

1. 节点-项目的源代码。它提供了位于公共文件夹中的html页面。


2. webpack-监视节点容器中的文件，并在代码发生更改时更新公共文件夹（来自节点容器）


3. 数据库

这是webpack / node容器设置

 网络：
 container_name：网络
构建：。 
 env_file：.env 
卷：
-。：/ usr / src / app 
-node_modules：/ usr / src / app / node_modules 
命令：npm start 
环境：
-NODE_ENV =开发
端口：
- 8000：8000 
 
 Webpack：
 container_name：webpack 
构建：./webpack/ 
取决于：
-网络
卷_来自：
-网络
 working_dir：/ usr / src / app 
命令：webpack --watch 
  

因此，当前，webpack容器监视并更新公用文件夹。我必须手动刷新浏览器才能看到我的更改。

我现在正在尝试合并webpack-dev-server以在浏览器中启用自动刷新

这些是我对webpack配置文件的更改

  module.exports = {
条目：[
'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 
构建：./webpack/ 
取决于：
-Web 
 volume_from：
-Web 
 working_dir：/ usr / src / app 
命令：webpack-dev-server --hot --inline 
端口：
- 8080：8080 
  

我似乎在运行应用程序时出现错误

 无效的配置对象。已使用与API模式不匹配的配置对象初始化Webpack。 
 webpack | -configuration.entry应该是以下之一：
 webpack |对象{< key> ;：非空字符串| [非空字符串]} |非空字符串| [非空字符串] |功能
 webpack |编译的入口点。 
 webpack |详细信息：
 webpack | * configuration.entry应该是一个对象。 
 webpack | * configuration.entry应该是一个字符串。 
 webpack | * configuration.entry不应有重复的项目（项目## 1和2相同）（{
 webpack | keyword： uniqueItems，
 webpack | dataPath： .entry， 
 webpack | schemaPath：＃/ definitions / common.nonEmptyArrayOfUniqueStringValues / uniqueItems，
 webpack | params：{
 webpack | i：2，
 webpack | j：1 
 webpack |}，
 webpack | message：不应该有重复的项目（项目## 1和2是相同的），
 webpack |模式：true，
 webpack | parentSchema：{
 webpack | items：{
 webpack | minLength：1，
 webpack | type：字符串 
 webpack |}，
 webpack | minItems：1，
 webpack | type： array，
 webpack | uniqueItems：true 
 webpack |}，
 webpack | 数据：[
 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 | [非空字符串] 
 webpack | * configuration.entry应该是函数
 webpack的实例|返回入口对象或promise的函数。
  

如您所见，我的入口对象没有任何对象重复项。

还有其他我应该做的事情吗？我错过了什么吗？

webpack-dev-server应该基本上将所有请求代理到节点服务器。

解决方案

即使将项目文件夹安装到容器中后，我也无法使webpack或webpack-dev-server监视（--watch）模式工作。

要解决此问题，来了解webpack如何检测目录中的文件更改。

它使用2种添加操作系统级别支持的软件之一来监视文件更改，这些文件称为 inotify 和 fsevent 。标准Docker映像通常没有预安装这些映像（对于Linux特别是 inotify ），因此您必须将其安装在Dockerfile中。

查找<$发行版的软件包管理器中的c $ c> inotify-tools 软件包并进行安装。幸运的是，所有 alpine ， debian ， centos 都有这个。 / p>

I have a docker app with the following containers

1. node - source code of the project. it serves up the html page situated in the public folder.
2. webpack - watches files in the node container and updates the public folder (from the node container) on the event of change in the code.
3. database

this is the webpack/node container setup

 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

So currently , the webpack container monitors and updates the public folder. i have to manually refresh the browser to see my changes.

I'm now trying to incorporate webpack-dev-server to enable automatic refresh in the browser

these are my changes to the webpack config file

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

  ....

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

and the new docker-compose file file 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"

i seem to be getting an error when running the app

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..

As you can see , my entry object doesnt have any duplicate items.

Is there something additional i should be doing? anything i missed?

webpack-dev-server should basically proxy all requests to the node server.

解决方案

I couldn't make webpack or webpack-dev-server watch (--watch) mode work even after mounting my project folder into container.
To fix this you need to understand how webpack detects file changes within a directory.
It uses one of 2 softwares that add OS level support for watching for file changes called inotify and fsevent. Standard Docker images usually don't have these (specially inotify for linux) preinstalled so you have to install it in your Dockerfile.
Look for inotify-tools package in your distro's package manager and install it. fortunately all alpine, debian, centos have this.

这篇关于在Docker应用程序中启用Webpack热重装的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！