Docker 和 Webpack 热重载不起作用答案

【问题标题】：Docker and Webpack hot reload not workingDocker 和 Webpack 热重载不起作用
【发布时间】：2020-11-16 13:18:26
【问题描述】：

在这里，我想将 Docker 用于我未来的 react/webpack 应用程序，但我无法正确配置 Webpack 和/或 docker 以使重新加载工作 (webpack-dev-server)。

我不太明白为什么，配置对我来说似乎没问题，也许我的“启动”命令不好？

这里是 Dockerfile 配置：

FROM node:11-alpine

WORKDIR /app
COPY package.json /app
RUN npm install
COPY . /app

CMD npm start
EXPOSE 8081

这里是 Webpack.config.js ：

const HtmlWebPackPlugin = require("html-webpack-plugin");
const path = require('path');

module.exports = {
entry: "./src/App.jsx",
output: {
  path: path.resolve(__dirname, 'dist'),
  filename: 'bundle.js'
},
module: {
  rules: [
    {
      test: /\.(js|jsx)$/,
      exclude: /node_modules/,
      use: {
        loader: "babel-loader"
      }
    },
    {
        test: /\.s[ac]ss$/i,
        use: [
            // Creates `style` nodes from JS strings
            'style-loader',
            // Translates CSS into CommonJS
            'css-loader',
            'resolve-url-loader',
            // Compiles Sass to CSS
            'sass-loader',
        ]
    }
  ]
},
devServer: {
  historyApiFallback: true,
  port:8081,
  host: '0.0.0.0',
  watchOptions: {
    aggregateTimeout: 500, // delay before reloading
    poll: 1000 // enable polling since fsevents are not supported in docker
}
},
plugins: [new HtmlWebPackPlugin({ template: "./src/index.html" })]
};

这里是 npm 启动脚本：

    "start": "webpack-dev-server --host 0.0.0.0 --config ./webpack.config.js --mode development",

谢谢！

【问题讨论】：

你是如何运行容器的？
docker build -t test . docker run -p 8081:8081
not build 命令，docker run 命令与run 命令一样热重载问题。
我把它放在后面，我的 docker run 命令是：docker run -p 8081:8081 test
如果不将文件绑定到具有卷的容器，您的容器无法检测文件更改，当您构建映像时，它会立即复制您的本地文件，它会在你从它运行一个容器

标签： node.js reactjs docker webpack

【解决方案1】：

从评论中，您没有将binding host volume 用于容器。您应该绑定主机卷以使热重载工作。

docker run -it --rm -v $PWD/host_app_code/:/app test

其中$PWD/host_app_code/ 是主机文件的路径，一旦绑定此路径，您对主机的更改将在容器内生效，并且热重载应该可以工作，您无需每次都构建映像。

【讨论】：

我应该做这样的事情来绑定主机src文件吗？ docker run -it --rm -v ./src -p 8081:8081 test

【解决方案2】：

正如@Adiii 的回答中提到的，您将需要使用绑定挂载卷，以便在您在主机上更改文件时在容器内更改文件，而无需重建映像。

我只是想补充一点，Docker 的入门教程解释了使用绑定安装进行开发。如果您还没有这样做，我肯定会建议您通过它，因为它可以更深入地了解它的工作原理以及为什么这是必要的。

Docker 的入门教程可在docker-hub 获得：

docker run -d -p 80:80 docker/getting-started

【讨论】：

好的，我试着快速做，但还不行，我想我会在教程上多逗留一点，以了解它是如何正常工作的，谢谢！

【解决方案3】：

要使热重载工作，您需要 docker 容器知道文件系统何时发生变化。为此，我们将主机卷绑定在容器中。

我们需要从 dockerfile 中删除 COPY 命令，因为我们直接挂载了整个代码目录。所以你的 dockerfile 应该是这样的

FROM node:11-alpine

WORKDIR /app

CMD npm start
EXPOSE 8081

为了将主机卷挂载到容器，我们必须在启动容器时使用-v。使用以下格式

docker run -it --rm -v <SOURCE_PATH>:/app <IMAGE_NAME>

替换

SOURCE_PATH与代码目录路径

IMAGE_NAME 带有图片名称

【讨论】：