热重载 HMR Webpack 在 Docker 容器 WSL2 上不起作用

Question

首先，我是 Docker 新手。

我为我在 WSL 2 上的 Ubuntu 中使用 Intertia.JS + Laravel Jetstream 的项目创建了自己的 docker 容器。

当我运行 npm run hot 时，我无法让 webpack 的 HMR 热重载工作 - 它也没有启动代理服务器......

当我运行 docker-compose exec php npm run hot 时，我收到以下消息：

> @ hot /var/www/html
> cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack- 
dev-server.js --inline --hot --disable-host-check -- 
config=node_modules/laravel-mix/setup/webpack.config.js

ℹ ｢wds｣: Project is running at http://localhost:8080/
ℹ ｢wds｣: webpack output is served from http://localhost:8080/
ℹ ｢wds｣: Content not from webpack is served from /var/www/html/public
ℹ ｢wds｣: 404s will fallback to /index.html

DONE  Compiled successfully in 27200ms     

例如，当我尝试对 vue 模板进行更改时，更改不会反映在 Chrome (localhost:8080) 上运行的网站上 - 即使我硬刷新页面也不会。即使每次编译都成功，更改也永远不会更新。

我尝试按照网上的其他建议使用我的 webpack 配置，但无济于事。

例如添加hmrOptions 和devServer 选项。

这是我的webpack.mix.js供参考：

const cssImport = require('postcss-import')
const cssNesting = require('postcss-nesting')
const mix = require('laravel-mix')
const path = require('path')
const purgecss = require('@fullhuman/postcss-purgecss')
const tailwindcss = require('tailwindcss')

mix.js('resources/js/app.js', 'public/js')
  .postCss('resources/css/app.css', 'public/css/app.css')
  .options({
    hmrOptions: {
      host: 'localhost',
      port: '8080',
    },
    postCss: [
      cssImport(),
      cssNesting(),
      tailwindcss('tailwind.config.js'),
      ...mix.inProduction() ? [
        purgecss({
          content: ['./resources/views/**/*.blade.php', './resources/js/**/*.vue'],
          defaultExtractor: content => content.match(/[\w-/:.]+(?<!:)/g) || [],
          whitelistPatternsChildren: [/nprogress/],
        }),
      ] : [],
    ],
  })
  .webpackConfig({
    mode: 'development',
    output: { chunkFilename: 'js/[name].js?id=[chunkhash]' },
    resolve: {
      alias: {
        vue$: 'vue/dist/vue.runtime.esm.js',
        '@': path.resolve('resources/js'),
      },
    },
    devServer: {  // I have tried with & without this
      proxy: {
        host: '0.0.0.0',  
        port: 8080,
      },
      watchOptions:{
        aggregateTimeout:200,
        poll:5000,
      },
    },
  })

if (mix.inProduction()) {
  mix.version()
  mix.sourceMaps()
}

这是我的 docker-compose.yml

version: "3.7"
services:
  php:
    build:
      args:
        user: admin
        uid: 1000
      context: ./
      dockerfile: Dockerfile
    image: app
    container_name: app-php
    restart: unless-stopped
    working_dir: /var/www/html
    volumes:
      - ./:/var/www/html
    networks:
      - app

  mysql:
    image: mysql:5.7
    container_name: app-mysql
    restart: unless-stopped
    environment:
      MYSQL_DATABASE: ${DB_DATABASE}
      MYSQL_ROOT_PASSWORD: ${DB_PASSWORD}
      MYSQL_PASSWORD: ${DB_PASSWORD}
      MYSQL_USER: ${DB_USERNAME}
      SERVICE_TAGS: dev
      SERVICE_NAME: mysql
    volumes:
      - ./docker-compose/mysql:/docker-entrypoint-initdb.d
      - nodemodules:/node_modules
    networks:
      - app

  nginx:
    image: nginx:alpine
    container_name: app-nginx
    restart: unless-stopped
    ports:
      - 8080:80
    volumes:
      - ./:/var/www/html
      - ./docker-compose/nginx:/etc/nginx/conf.d/
    networks:
      - app
    links:
      - php
    depends_on:
      - php

networks:
  app:
    driver: bridge

volumes:
  nodemodules: {}

这是我的 Dockerfile

FROM php:7.4-fpm

# Arguments defined in docker-compose.yml
ARG user
ARG uid

# Install system dependencies
RUN curl -sL https://deb.nodesource.com/setup_13.x | bash

RUN apt-get update && \
    apt-get install -y -q --no-install-recommends \
    nano apt-utils curl zip unzip default-mysql-client nodejs build-essential git \
    libcurl4-gnutls-dev libmcrypt-dev libmagickwand-dev \
    libwebp-dev libjpeg-dev libpng-dev libxpm-dev \
    libonig-dev \
    libxml2-dev \
    libfreetype6-dev libaio-dev zlib1g-dev libzip-dev && \
    echo 'umask 002' >> /root/.bashrc  && \
    apt-get clean

# Clear cache
RUN apt-get clean && rm -rf /var/lib/apt/lists/*

# Install PHP extensions
RUN docker-php-ext-install pdo_mysql mbstring exif pcntl bcmath gd

# Get latest Composer
COPY --from=composer:latest /usr/bin/composer /usr/bin/composer



# Create system user to run Composer and Artisan Commands
RUN useradd -G www-data,root -u $uid -d /home/$user $user
RUN mkdir -p /home/$user/.composer && \
    chown -R $user:$user /home/$user

# Set working directory
WORKDIR /var/www/html

USER $user

EXPOSE 8080

如果您需要更多信息，请告诉我。谢谢！

Answer 1

1. 在您的 docker 配置文件中添加以下配置

   ENV CHOKIDAR_USEPOLLING=true
   

2. 删除 node_modules 并重新安装