如何配置 webpack 热重载以在 Docker 内工作？

Question

我在 Symfony 4 项目上工作了几个月，我想Docker对其进行处理。

我使除 Webpack 以外的所有东西都能正常工作，我使用它通过 npm run watch 或 npm run dev 命令编译我的 .scss 和 .js 文件。

实际上 webpack 不会监听我在 .scss 或 .js 文件中所做的更改。

这是我的配置，我的文件中肯定遗漏了一些东西。

我的 docker-compose.yml :

version: '3.8'
services:
  mysql:
     image: mysql:8.0
     command: --default-authentication-plugin=mysql_native_password
     restart: on-failure
     environment:
       MYSQL_ROOT_PASSWORD: rootpassword
  phpmyadmin:
    image: phpmyadmin/phpmyadmin
    restart: on-failure
    depends_on:
      - mysql
    ports:
      - '8004:80'
    environment:
      PMA_HOSTS: mysql
  php:
    build:
      context: .
      dockerfile: php/Dockerfile
    volumes:
      - '../.:/usr/src/app'
    restart: on-failure
    env_file:
      - .env
  nginx:
    image: nginx:1.19.0-alpine
    restart: on-failure
    volumes:
      - '../public:/usr/src/app'
      - './nginx/default.conf:/etc/nginx/conf.d/default.conf:ro'
    ports:
      - '80:80'
    depends_on:
      - php
  node:
    build:
      context: .
      dockerfile: node/Dockerfile
    volumes:
       - '../.:/usr/src/app'
    command: npm run watch

我的 Dockerfile 节点图像：

FROM node:12.10.0

RUN apt-get update && \
    apt-get install -y \
        curl

RUN curl -sS https://dl.yarnpkg.com/debian/pubkey.gpg | apt-key add - && \
        echo "deb https://dl.yarnpkg.com/debian/ stable main" | tee /etc/apt/sources.list.d/yarn.list

WORKDIR /usr/src/app

CMD ["npm", "run", "watch"]

我的 webpack.config.js :

var Encore = require('@symfony/webpack-encore');
var CopyWebpackPlugin = require('copy-webpack-plugin');

if (!Encore.isRuntimeEnvironmentConfigured()) {
    Encore.configureRuntimeEnvironment(process.env.NODE_ENV || 'dev');
}

Encore
    .setOutputPath('public/build/')
    .setPublicPath('/build')

    .addEntry('app', './assets/js/app.js')

    .splitEntryChunks()

    .disableSingleRuntimeChunk()

    .enableSassLoader()

    .cleanupOutputBeforeBuild()
    
    .enableBuildNotifications()
    
    .enableSourceMaps(!Encore.isProduction())
    .enableVersioning(Encore.isProduction())

    .configureBabel(() => {}, {
        useBuiltIns: 'usage',
        corejs: 3
    })

    .addPlugin(new CopyWebpackPlugin([
        { from: './assets/pictures', to: 'pictures' }
    ]))
;

module.exports = Encore.getWebpackConfig();

// module.exports = {
//   mode: 'development',
//   devServer: {
//     port: 80,
//     host: '0.0.0.0',
//     disableHostCheck: true,
//     watchOptions: {
//       ignored: /node_modules/,
//       poll: 1000,
//       aggregateTimeout: 1000
//     }
//   }
// }

如你所见，我已经在 webpack.config.js 中尝试了一些东西，我看到了很多关于 watchOptions 的东西，但我没有明白。

这是我项目的组织：

project's organisation

我希望能够通过 Webpack 实时监听我所做的任何更改来启动我的 Docker。

这是运行 docker-compose up:

之后的命令控制台

console command docker-compose up

如果你有什么建议可以改善我的 Docker 环境，我都会采纳！

谢谢！

Answer 1

我只是用这个：

docker-compose.yml:

node:
    image: node:16-alpine3.13
    working_dir: /var/www/app
    user: "$USERID"
    volumes:
        - .:/var/www/app
    tty: true

和docker-compose exec node yarn watch

按预期工作。

Answer 2

好的，我想我解决了我的问题，

我关注了@Rufinus 的回答；我不得不在第一个控制台命令中 docker-compose up，打开第二个控制台命令并执行 winpty docker-compose exec node yarn watch 但出于某种原因我遇到了 node-sass 兼容性问题：我安装了我的 node_module （ windows10)文件夹放入容器(Linux).

所以我打开我的节点 CLI 容器并执行 npm rebuild node-sass 来解决这个问题，最后它成功了！

但我不知道为什么，我目前的解决方案是在我的本地文件夹上执行 npm run watch（就像我在对我的所有应用程序进行 Docker 化之前所做的那样）并在我更改时重新构建资产.scss 或 .js 文件。

如何配置 webpack 热重载以在 Docker 内工作？

How to configure webpack hot reload to work inside Docker?

node.js

symfony

npm

docker

webpack