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()],
};

有任何想法是什么原因导致了这个问题？

- Sibeesh Venu

---

Webpack 5有重大变化，这篇文章帮了我大忙 https://frontendguruji.com/blog/invalid-options-object-dev-server/ - Mandeep Pasbola

Answer 1

所以 devServer|Webpack 配置与 webpack-dev-server 的选项有关 如果你的 webpack 使用 webpack-dev-server 版本 4，你应该使用这个迁移指南

// 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",
  },

- Tushar Mistry

---

我遇到了问题标题中的错误，但错误信息中显示未知属性“contentBase”，而不是“hotOnly”。使用您提供的“在v4中将会”建议解决了我的问题。谢谢Tushar。 - jetimms

还有一个问题是，在 devMiddleware 属性后面缺少了逗号，导致出现错误。 - ashish2199

这对我很有帮助，因为我在contentBase属性上遇到了问题，而你的帖子教会了我该属性已被弃用并更改为“static”。谢谢！ - Eric Hepperle - CodeSlayer2010

我该如何获取v3版本？ - AnonymousUser

Answer 2

似乎更新版本的webpack不支持属性hotOnly，我们应该使用选项hot。你可以在这里查看与此相关的GitHub问题here。

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

最新版本会在设置 hot: true 时自动应用 HotModuleReplacementPlugin 插件，因此请检查您的插件列表中是否有 HotModuleReplacementPlugin，如果您设置了 hot: true/hot: "only"。如果您使用了上述设置，您将收到一个警告 " [webpack-dev-server] "hot: true" automatically applies HMR plugin, you don't have to add it manually to your webpack configuration."。请注意保留 HTML 标签。

plugins: [new webpack.HotModuleReplacementPlugin()], 

如果你遇到错误 "static heartbeatInterval = 1000; SyntaxError: Unexpected token ="，请确保按照这里的指南使用 node 版本 >= 12.13.0。

当你运行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"

- Sibeesh Venu

Answer 3

通过安装旧版本的webpack解决

"webpack-dev-server": "3.10.1"

- Latony Aguiar

Answer 4

对我而言，在 devMiddleware 属性后缺少逗号导致出现错误。

- Bikash Ghimire