使用 webpacker (webpack-dev-server) 在 docker 容器内编译而不重建答案

【问题标题】：Using webpacker (webpack-dev-server) to compile inside a docker container without rebuilding使用 webpacker (webpack-dev-server) 在 docker 容器内编译而不重建
【发布时间】：2018-03-21 15:16:28
【问题描述】：

编辑：Docker 版本 17.12.0-ce，在 OSX High Sierra 10.12.6 上构建 c97c6d6

我正在将 webpacker 包含到现有的 rails 4.2 项目中（某些部分仍然使用 sprockets），并且遇到了一些热重载问题。我的应用程序是 dockerized，我希望有一个设置，我可以在其中编辑我的 React 代码，并在我的 rails docker 容器中编译和刷新它，而无需为每一个小的更改重新构建（例如 docker-compose build）。

目前我正在运行 webpack-dev-server 并正确编译代码。 webpack 开发服务器 (http://dockerhost:3035/webpack-dev-server/) 将从我的本地计算机编译卷安装代码，但是当我刷新我的 rails 应用程序时，新编译的资产不会出现。我的设置有什么明显的问题吗？

# webpacker.yml
development:
  <<: *default

compile: true
  # Reference: https://webpack.js.org/configuration/dev-server/
  dev_server:
    https: false
    host: 0.0.0.0 #webpacker
    port: 3035
    public: 0.0.0.0:3035
    hmr: true
    # Inline should be set to true if using HMR
    inline: true
    overlay: true
    compress: true
    disable_host_check: true
    use_local_ip: false
    quiet: false
    headers:
      'Access-Control-Allow-Origin': '*'
    watch_options:
      ignored: /node_modules/
      poll: 1000

# docker-compose.yml
version: '3'
networks:
  pnet:
    driver: bridge

services:  
  webpacker:
    build: .
    command: bundle exec bin/webpack-dev-server #./bin/webpack-dev-server
    networks:
      - pnet
    volumes:                                                                                                               
      - .:/webpacker-app                                                                                                   
    working_dir: /webpacker-app
    ports:
      - '3035:3035'
      - '8080:8080'
    environment:
      - NODE_ENV=development
      - RAILS_ENV=development
      - WEBPACKER_DEV_SERVER_HOST=0.0.0.0
  web: 
    build: .
    command: bundle exec passenger start
    volumes:
      - ~/tmp/pids:/usr/src/app/tmp/pids
      - .:/webpacker-app
    networks:
      - pnet
    ports:
      - "3000:3000"
      - "3443:3443"
    depends_on:
      - webpacker
    environment:
      - NODE_ENV=development
      - RAILS_ENV=development
      - WEBPACKER_DEV_SERVER_HOST=0.0.0.0

【问题讨论】：

通常 webpack-dev-server 会监视文件中的更改并重新构建它们。编译后，您的浏览器会自动重新加载更改。你确定，你的文件被监视了吗？也许看看这个问题/答案stackoverflow.com/questions/29722755/…也许你会发现你的设置中缺少的东西？
请说明您使用的是哪个操作系统和Docker版本？
你检查过 webpacker github repo 上的文档吗？ github.com/rails/webpacker/blob/master/docs/docker.md
@HolgerFrohloff 我知道这些文件正在被监视，因为我可以在 webpack 服务器日志中看到它们正在编译。我在 webpack-dev-server 启动命令中添加了 --hot 和 --inline 选项，但没有成功
@TarunLalwani 编辑了我的帖子“Docker 版本 17.12.0-ce，在 OSX High Sierra 10.12 上构建 c97c6d6”

标签： ruby-on-rails docker webpack docker-compose webpacker

【解决方案1】：

我对@987654321@ 不太熟悉，但看看你的配置，我猜你使用0.0.0.0:3035 地址从web 容器中访问开发服务器资产，而它应该是webpacker:3035。

尝试在您的web 服务配置中更新WEBPACKER_DEV_SERVER_HOST：

web:
  ...
  environment:
    ...
    - WEBPACKER_DEV_SERVER_HOST=webpacker

【讨论】：