如何配置webpack熱多載以在Docker內作業？

我在一個Symfony 4專案上作業了幾個月，我想把它Docker化。

除了Webpack，我讓所有的東西都作業，我用它來編譯我的.scss和.js檔案，使用npm run watch或者npm run dev命令。

事實上，webpack并沒有聽取我在.scss或.js檔案中的改動。

這是我的配置，我肯定在我的檔案中遺漏了什么。

我的docker-compose.yml :

version: '3.8'
服務:
  mysql:
     image: mysql:8.0
     命令： --default-authentication-plugin=mysql_native_password
     重新啟動: 失敗后
     環境:
       MYSQL_ROOT_PASSWORD: rootpassword
  phpmyadmin:/span>
    image: phpmyadmin/phpmyadmin
    重啟: 失敗后
    depends_on: on-failure
      - Mysql
    埠:
      - '8004:80'/span>
    環境:
      PMA_HOSTS: Mysql
  php:
    構建:
      context: .
      dockerfile: php/Dockerfile
    卷軸:
      - './.:/usr/src/app'/span>
    重新啟動: 失敗后
    env_file:
      - .env
  nginx:
    image: nginx:1.19.0-alpine
    重新啟動: 失敗后
    卷軸:
      - './public:/usr/src/app'
      - './nginx/default.conf:/etc/nginx/conf.d/default.conf:ro'
    ports:
      - '80:80'
    depends_on:
      - php
  節點:
    構建:
      context: .
      dockerfile: node/Dockerfile
    卷軸:
       - './.:/usr/src/app'/span>
    命令： npm run watch

我的Dockerfile用于Node Image :

FROM node:12.10.0

運行 apt-get update && 
    apt-get install -y 
        咖喱

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: '用法'。
        corejs: 3。
    })

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

module.exports = Encore.getWebpackConfig() 。

//模塊.exports = {.
// mode: 'development',
// devServer: {
//埠。80,
// host: '0.0.0.0',/span>
// disableHostCheck: true,
//watchOptions: {
// 忽略了。/node_modules/,
//poll: 1000,
// aggregateTimeout: 1000
// }
// }
// }

正如你所看到的，我已經在webpack.config.js中嘗試了一些東西，我看到了很多關于watchOptions的東西，但我沒有得到它。

而這里是我的專案組織：

專案的組織

我希望能夠通過Webpack來啟動我的Docker，實時聆聽我所做的任何改變。

以下是運行docker-compose up后的命令控制臺：

console command docker-compose up

如果你有一些建議來改善我的Docker環境，我都接受！

謝謝你！

如果你有一些建議來改善我的Docker環境，我都接受。

謝謝你！

uj5u.com熱心網友回復：

我只用這個：

docker-compose.yml:

node:
    image: node:16-alpine3.13
    working_dir: /var/www/app
    user: "$USERID"/span>
    卷軸:
        - .:/var/www/app.
    tty: true

和docker-compose exec node yarn watch

如預期般作業。

uj5u.com熱心網友回復：

好吧，我想我解決了我的問題，

我按照@Rufinus的回答；我必須在第一個控制臺命令中docker-compose up，打開第二個控制臺命令并執行winpty docker-compose exec node yarn watch，但由于某些原因，我在node-sass的兼容性方面有問題：我把我的node_module（windows 10）檔案夾安裝到容器（Linux）。

所以我打開了我的node CLI容器并執行npm rebuild node-sass來解決這個問題，最后它成功了！

但我不知道為什么，我目前的解決方案是在我的本地檔案夾上執行npm run watch（就像我在Docker化所有應用程式之前所做的那樣），當我改變.scss或.js檔案時，它會重新構建資產。

標籤：

上一篇：平均開放蟲子壽命（天數

下一篇：創建一個回圈，回圈瀏覽每一年，為該年加載一個陣列