webpack 选项有一个未知的属性 'hotOnly'。无效的选项对象。已使用选项对象初始化开发服务器

Question

我在我的 react 应用程序中运行命令 npx webpack-dev-server --mode development 并收到上述错误。

[webpack-cli] Invalid options object. Dev Server has been initialized using an options object that does not match the API schema.
 - options has an unknown property 'hotOnly'. These properties are valid:

下面是我的 webpack.config.js 文件。

const path = require("path");
const webpack = require("webpack");

module.exports = {
  entry: "./src/index.js",
  mode: "development",
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        exclude: /(node_modules)/,
        loader: "babel-loader",
        options: {
          presets: ["@babel/env"],
        },
      },
      {
        test: /\.css$/,
        use: ["style-loader", "css-loader"],
      },
    ],
  },
  resolve: {
    extensions: ["*", ".js", ".jsx"],
  },
  output: {
    path: path.resolve(__dirname, "dist/"),
    publicPath: "/dist/",
    filename: "bundle.js",
  },
  devServer: {
    contentBase: path.join(__dirname, "public/"),
    port: 3000,
    publicPath: "https://localhost:3000/dist/",
    hotOnly: true,
  },
  plugins: [new webpack.HotModuleReplacementPlugin()],
};

知道是什么导致了这个问题吗？

Answer 1

webpack的更新版本似乎不支持属性hotOnly，我们应该使用选项hot代替。您可以看到与此 here.

相关的 GitHub 问题

  devServer: {
    hot: "only", // hot:true
  },

最新版本会在您设置 hot: true 时自动应用 HotModuleReplacementPlugin 插件，因此如果您设置了 hot: true/hot: "only"，请检查您的插件中是否没有 HotModuleReplacementPlugin。您将收到警告，因为“ [webpack-dev-server] “hot: true” 自动应用 HMR 插件，您不必手动将其添加到您的 webpack 配置中。" 如果您有上述设置。

plugins: [new webpack.HotModuleReplacementPlugin()],

如果您遇到错误“static heartbeatInterval = 1000; SyntaxError: Unexpected token =”，确保按照指南使用节点版本 >= 12.13.0 here.

如果一切都完成了，当您运行 npx webpack-dev-server --mode development.

时，您应该能够看到前面的输出

感谢@Tushar Mistry 提供迁移指南。

下面是我完成的 webpack.config.js 文件。

const path = require("path");
const webpack = require("webpack");

module.exports = {
  entry: "./src/index.js",
  mode: "development",
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        exclude: /(node_modules)/,
        loader: "babel-loader",
        options: {
          presets: ["@babel/env"],
        },
      },
      {
        test: /\.css$/,
        use: ["style-loader", "css-loader"],
      },
    ],
  },
  resolve: {
    extensions: ["*", ".js", ".jsx"],
  },
  output: {
    path: path.resolve(__dirname, "dist/"),
    publicPath: "/dist/",
    filename: "bundle.js",
  },
  devServer: {
    static: {
      directory: path.join(__dirname, "public/"),
    },
    port: 3000,
    devMiddleware: {
      publicPath: "https://localhost:3000/dist/",
    },
    hot: "only",
  },
};

或者您也可以使用旧版本，如下所示。

"webpack": "4.41.5",
"webpack-cli": "3.3.10",
"webpack-dev-server": "3.10.1"

Answer 2

所以 devServer|Webpack 配置与 webpack-dev-server 的选项相关如果你的 webpack 使用的是 webpack-dev-server version 4 你应该使用这个 migration guide

// your v3 config
devServer: {
    contentBase: path.join(__dirname, "public/"),
    port: 3000,
    publicPath: "https://localhost:3000/dist/",
    hotOnly: true,
  },

在 v4 中将是

devServer: {
    // contentBase
    static : {
      directory : path.join(__dirname, "public/")
    },
    port: 3000,
    // publicPath
    devMiddleware:{
       publicPath: "https://localhost:3000/dist/",
    }
    // hotOnly
    hot: "only",
  },

Answer 3

对我来说，在 devMiddleware 属性之后缺少逗号导致错误。

webpack 选项有一个未知的属性 'hotOnly'。无效的选项对象。已使用选项对象初始化开发服务器

webpack options has an unknown property 'hotOnly'. Invalid options object. Dev Server has been initialized using an options object

reactjs

webpack

ecmascript-6

build

webpack-dev-server

webpack 选项有一个未知的 属性 'hotOnly'。无效的选项对象。已使用选项对象初始化开发服务器

webpack options has an unknown property 'hotOnly'. Invalid options object. Dev Server has been initialized using an options object

reactjs

webpack

ecmascript-6

build

webpack-dev-server

webpack 选项有一个未知的属性 'hotOnly'。无效的选项对象。已使用选项对象初始化开发服务器