BrowserSync Webpack in Docker

Question

I have 3 containers, one for the DB, one for the php/apache and the last one for webpack. My website is a Wordpress blog. I don't usually use Docker but I wanted to try. So, there is my webpack config that read my css (sass) and js, compile it, it work. But I want to add a BrowserSync for the auto reload. And it's not working the way I want. localhost:3000 is working (my home page) but whenever I go on another page (localhost:3000/whatever) It change my url to php:8080/whatever.

Here is my docker-compose

    php:
        build: .docker
        volumes:
            - ./.docker/conf/php/php.ini:/usr/local/etc/php/conf.d/php.ini
            - .:/var/www/app
        ports:
            - "80:80"
        depends_on:
            - db
        user: www-data
    db:
        image: mysql:5
        ports:
            - "3307:3306"
        environment:
            MYSQL_ALLOW_EMPTY_PASSWORD: 'yes'

    webpack:
        build: .docker/webpack
        volumes:
            - ./:/usr/src/app
        ports:
            - "3000:3000"
            - "3001:3001"
        environment: 
            - LOCAL_DOMAIN=php/
        command: sh -c "npm install && npm run dev-server"
        depends_on:
            - php

My DockerFile (Webpack)

FROM node:16

WORKDIR /usr/src/app

EXPOSE 3000
EXPOSE 3001

# Port pour le devserver de Webpack
EXPOSE 8080

The webpack config

const localDomain = process.env.LOCAL_DOMAIN ? process.env.LOCAL_DOMAIN : 'http://local.websitename.com/';

let baseConfig = {
  externals: {
    "jquery": "jQuery"
  },
  plugins: [
    new MiniCssExtractPlugin({
      filename: '[name].css',
    }),

    new BrowserSyncPlugin({
      proxy: localDomain,
      files: [outputPath + '/*.css', themePath + '**/*.php', outputPath + '/*.js'],
      injectCss: true,
    }, {
      reload: false,
      injectCss: true
    }),

    new CleanWebpackPlugin(),

  ],
  module: {
    rules: [{
        // CSS SASS SCSS
        test: /\.(css|sass|scss)$/,
        use: [
          MiniCssExtractPlugin.loader,
          {
            loader: 'css-loader',
            options: {
              importLoaders: 2,
              sourceMap: true,
            },
          },
          {
            loader: 'postcss-loader'
          },
          {
            loader: 'sass-loader',
            options: {
              sourceMap: true,
            },
          },
        ],
      },
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: ["babel-loader"]
      },
      {
        test: /\.(jpg|jpeg|png|gif|woff|woff2|eot|ttf)$/i,
        type: 'asset/resource'
      },
      {
        test: /\.svg$/,
        use: ['@svgr/webpack', 'url-loader?limit=1024'],
      },
    ]
  }
}

I tried multiple things like but it's not working.

 new BrowserSyncPlugin({
            host: 'localhost',
            port: 3000,
            proxy: 'http://localhost:8080/'
        },

Can you help me, please ? (For Info, localhost is working well, I can navigate on my website)