如何配置Docker环境下webpack热重载适配Symfony 4项目

问题修复方案 #

1. 修正webpack.config.js配置 #

你之前注释的监听配置未生效，是因为最终导出的是Symfony Encore生成的配置，需要通过Encore提供的API注入监听选项，在Encore链式配置中添加如下代码即可：

Encore
    // 保留你原有的所有配置不变，新增以下内容
    .configureWatchOptions((options) => {
        options.poll = 1000; // 开启轮询适配Docker挂载卷的文件监听
        options.aggregateTimeout = 300; // 修改后延迟300ms编译，避免重复触发
        options.ignored = /node_modules/; // 忽略依赖目录减少性能消耗
    })
;
// 保留原有的 module.exports = Encore.getWebpackConfig(); 即可，删除你之前注释的额外webpack配置

2. 调整docker-compose.yml的node服务配置 #

给node服务添加环境变量强制监听工具启用轮询，同时排除node_modules挂载避免宿主机与容器依赖冲突：

node:
    build:
      context: .
      dockerfile: node/Dockerfile
    volumes:
       - '../.:/usr/src/app'
       - '/usr/src/app/node_modules' # 新增：容器内node_modules不被宿主机覆盖
    environment: # 新增：强制chokidar启用轮询
       - CHOKIDAR_USEPOLLING=true
       - NODE_ENV=development
    command: npm run watch

修改完成后执行以下命令重启服务即可生效：

docker-compose down
docker-compose build node
docker-compose up

Docker环境优化建议 #

• 升级Node镜像版本：Node 12已经停止维护，建议更换为node:18-alpine LTS版本，兼容性、安全性和性能都有明显提升，同时可以删掉原有Dockerfile中安装yarn的冗余配置，如果需要yarn直接用Node自带的corepack启用即可。
• MySQL数据持久化：给mysql服务添加命名卷挂载，避免容器删除后数据丢失：

  mysql:
    image: mysql:8.0
    command: --default-authentication-plugin=mysql_native_password
    restart: on-failure
    volumes:
      - mysql_data:/var/lib/mysql # 新增数据持久化挂载
    environment:
      MYSQL_ROOT_PASSWORD: rootpassword
  # 配置文件最底部新增全局卷声明
  volumes:
    mysql_data:
  

• Nginx挂载调整：将Nginx的挂载路径从../public:/usr/src/app调整为../.:/usr/src/app，和PHP服务保持一致，避免后续新增静态资源路径时出现404，只要保证Nginx配置中的root指向/usr/src/app/public即可。
• 增加容器名：给每个服务添加container_name配置，方便后续执行手动命令时不需要查询容器哈希，比如container_name: symfony_php、container_name: symfony_node。

内容的提问来源于stack exchange，提问作者antonio_larges