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

Question

我在 Symfony 4 项目上工作了几个月，我想将它 Dockerize。

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

实际上 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

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

我关注了@Rufinus 的回答；我必须在第一个控制台命令中使用docker-compose up，打开第二个控制台命令并执行winpty docker-compose exec node yarn watch，但由于某种原因我遇到了node-sass 兼容性问题：我将我的node_module（Windows 10）文件夹安装到容器（Linux）中.

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

但我不知道为什么，我当前的解决方案是在我的本地文件夹上执行 npm run watch（就像我在 Dockerizing 我的所有应用程序之前这样做）并且当我更改 .scss 或.js 文件。

Answer 2

我只是用这个：

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

按预期工作。