BrowserSync Webpack in Docker - 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)