Webpack 5 livereload 启用但不工作

Question

我遇到 Webpack 5 中的实时重新加载无法正常工作的问题。浏览器控制台显示：

[webpack-dev-server] Live Reloading enabled.

但是当我 change/save 一个文件时它不会重新加载。浏览器控制台或终端没有错误。

我在 Windows 10，使用官方的 Alpine Linux Docker 图像；我的浏览器是 Chrome 版本 102.0.5005.63（官方构建）（64 位）。该项目是一个相当简单的前端网络应用程序。

我的 package.json 开发依赖项：

"devDependencies": {
"html-webpack-plugin": "^5.5.0",
"webpack": "^5.72.0",
"webpack-cli": "^4.9.2",
"webpack-dev-server": "^4.9.0",
"webpack-webmanifest-loader": "^2.0.2" }

我的 webpack.config.js 文件：

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

module.exports = {
  entry: "./src/index.js",
  mode: "development",
  devtool: "inline-source-map",
  target: "web",
  devServer: {
    static: {
      directory: path.join(__dirname, "src"),
    },
    compress: true,
    hot: false,
    port: 3000,
    liveReload: true,
    watchFiles: "./src/*",
  },

  plugins: [
    new HtmlWebpackPlugin({
      title: "Title",
      template: "src/index.html",
    }),
  ],
  output: {
    filename: "[name].bundle.js",
    path: path.resolve(__dirname, "dist"),
    clean: true,
  },
  module: {
    rules: [
      {
        test: /\.(png|svg|webp|jpg|jpeg)$/i,
        type: "asset/resource",
      },
      {
        test: /\.(json|txt|mp3)$/i,
        type: "asset/resource",
      },
      {
        test: /\.webmanifest$/i,
        use: "webpack-webmanifest-loader",
        type: "asset/resource",
      },
    ],
  },
};

启动开发服务器时，我使用以下命令：

npx webpack serve --static assets

我的file/folder结构：

总体上是 Webpack 的新手。请帮忙！

Answer 1

经过大量google的搜索，终于在webpack官方文档中找到了a的解决方案：watchOptions.

If watching does not work for you, try out this option. This may help issues with NFS and machines in VirtualBox, WSL, Containers, or Docker. In those cases, use a polling interval and ignore large folders like /node_modules/ to keep CPU usage minimal.

Sooo.... 仍然不确定为什么它不能与常规监视选项一起使用，但此时轮询在 docker 容器中确实有效。

这是我的 webpack.config.js 文件：

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

module.exports = {
  entry: "./src/index.js",
  mode: "development",
  devtool: "inline-source-map",
  target: "web",
  devServer: {
    static: ["assets"],
    compress: true,
    hot: false,
    port: 3000,
  },
  watchOptions: {
    ignored: "/node_modules/",
    poll: 1000, // Check for changes every second
  },
  output: {
    filename: "[name].bundle.js",
    path: path.resolve(__dirname, "dist"),
    clean: true,
  },
  plugins: [
    new HtmlWebpackPlugin({
      title: "Title",
      template: "src/index.html",
    }),
  ],
  module: {
    rules: [
      {
        test: /\.(png|svg|webp|jpg|jpeg|json|txt|mp3)$/i,
        type: "asset/resource",
      },
      {
        test: /\.webmanifest$/i,
        use: "webpack-webmanifest-loader",
        type: "asset/resource",
      },
    ],
  },
};

我使用以下命令启动它：

npx webpack serve

Webpack 5 livereload 启用但不工作

Webpack 5 livereload enabled but not working

livereload

docker

webpack-5