为什么我的 webback 服务器没有重新加载？

Question

我刚刚安装了一个 Webpack 服务器，它也可以工作。但令我烦恼的是我总是需要重新加载浏览器。所以我尝试用 hot;true 来改进这一点。它仍然不起作用。这是一个简单的 Javascript 项目

const path = require("path");

module.exports = {
  entry: "./src/index.js", // Einstiegspunkt im src-Ordner
  output: {
    filename: "bundle.js", // Name der gebündelten Datei
    path: path.resolve(__dirname, "dist"), // Ausgabeordner
    publicPath: "/",
  },
  devServer: {
    static: path.join(__dirname, "src"), // Ordner, in dem sich die HTML-Datei befindet
    port: 9000, // Port, auf dem der Server läuft
    historyApiFallback: true,
    hot: true,
  },
  mode: "development", // Entwicklungsmodus
  target: "web", // Zielumgebung Web
  module: {
    rules: [
      {
        test: /\.js$/, // Regex für JavaScript-Dateien
        exclude: /node_modules/, // Schließt node_modules aus
        use: {
          loader: "babel-loader", // Verwendet Babel zum Transpilieren
          options: {
            presets: ["@babel/preset-env"], // Verwendet das preset-env Preset
          },
        },
      },
    ],
  },
};

我只将 Hot 设置为 true，但老实说我不知道我需要为实时重新加载做什么

Answer 1

为了启用实时重新加载，Webpack 需要知道哪些文件已更改。 使用

devServer.watchFiles

选项，您可以定义源文件的路径。

将

watchFiles

选项添加到

devServer

:

const path = require("path");

module.exports = {
  entry: "./src/index.js", // Einstiegspunkt im src-Ordner
  output: {
    filename: "bundle.js", // Name der gebündelten Datei
    path: path.resolve(__dirname, "dist"), // Ausgabeordner
    publicPath: "/",
  },
  devServer: {
    static: path.join(__dirname, "src"), // Ordner, in dem sich die HTML-Datei befindet
    port: 9000, // Port, auf dem der Server läuft
    historyApiFallback: true,
    hot: true,

    // live reload after changes the files defined in watchFiles.paths
    watchFiles: {
      paths: ['src/**/*.*'], // watch changes
      options: {
        usePolling: true,
      },
    },
  },
  mode: "development", // Entwicklungsmodus
  target: "web", // Zielumgebung Web
  module: {
    rules: [
      {
        test: /\.js$/, // Regex für JavaScript-Dateien
        exclude: /node_modules/, // Schließt node_modules aus
        use: {
          loader: "babel-loader", // Verwendet Babel zum Transpilieren
          options: {
            presets: ["@babel/preset-env"], // Verwendet das preset-env Preset
          },
        },
      },
    ],
  },
};