webpack-dev-server 运行两次

Question

我已经尝试用几种不同的方法解决这个问题，所以我必须从头开始。

我有一个名为 webpack.dev.js 的配置文件，如图所示：

const path = require("path");

const HtmlWebpackPlugin = require("html-webpack-plugin");
const ExtractTextPlugin = require("extract-text-webpack-plugin");
const CopyWebpackPlugin = require("copy-webpack-plugin");

module.exports = {
  entry: "./src/script.js",
  output: {
    filename: "bundle.js",
    path: path.resolve(__dirname, "dist")
  },

  devtool: "inline-source-map",
  devServer: {
    contentBase: path.join(__dirname, "dist")
  },

  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader",
          options: {
            presets: ["env"]
          }
        }
      },
      {
        test: /\.scss$/,
        use: ExtractTextPlugin.extract({
          fallback: "style-loader",
          use: ["css-loader", "postcss-loader", "sass-loader"]
        })
      }
    ]
  },

  plugins: [
    new HtmlWebpackPlugin({template: path.join("src", "index.html")}),
    new ExtractTextPlugin("style.css"),
    new CopyWebpackPlugin([{from: "src/images", to: "images"}])
  ]
};

所以，我在 package.json 中设置了一个启动脚本来启动开发服务器

"start": "webpack-dev-server --config webpack.dev.js"

现在问题开始了。当我运行脚本时，出现以下错误

Invalid configuration object. webpack-dev-server has been initialized using a configuration object that does not match the API schema.
 - configuration has an unknown property 'error'. These properties are valid:
   object { hot?, hotOnly?, lazy?, bonjour?, host?, allowedHosts?, filename?, publicPath?, port?, socket?, watchOptions?, headers?, clientLogLevel?, overlay?, progress?, key?, cert?, ca?, pfx?, pfxPassphrase?, requestCert?, inline?, disableHostCheck?, public?, https?, contentBase?, watchContentBase?, open?, useLocalIp?, openPage?, features?, compress?, proxy?, historyApiFallback?, staticOptions?, setup?, stats?, reporter?, noInfo?, quiet?, serverSideRender?, index?, log?, warn? }

如您所见，这个错误非常令人困惑，因为配置文件中没有error 属性

在尝试了不同的方法来解决这个问题后，我尝试只删除 devServer 属性并使用默认设置启动开发服务器。

但现在是时候变得奇怪了。如果 Web 服务器启动了两次，输出看起来像：

Project is running at http://localhost:8080/
webpack output is served from /
Project is running at http://localhost:8081/
webpack output is served from /

之后，它会记录一些关于 multiple modules with names that only differ in casing

的警告

然后在谷歌搜索后我发现其他人也有这个 unknown property 'error' 问题，而发生在他身上的原因是他在后台有 http-server 运行 .

所以现在，我的理论是，由于某种原因，webpack-dev-server 是运行两次，并行的，这会产生一个竞争条件或错误，从而触发这个 unknown property 'error' 问题。

我只找到另外两个人有类似的问题，他们的问题只是在HtmlWebpackPlugin的配置对象中添加inject: false就解决了。这样做并没有使错误消失，当运行它没有 devServer 配置时，它只是从页面中删除了所有 js 和 css，因为它没有注入 <link> 和<script> 标签放入 html.

此时我不知道如何解决这个问题，这就是为什么我问是否有人可以帮助我。

Answer 1

似乎与 webpack-dev-server 版本 2.8.0 有关。

我通过降级到版本 ~2.7.0 (2.7.1) 解决了这个问题。

Answer 2

在您的项目文件夹中，运行 npm uninstall webpack-dev-server。

我在 webpack-dev-server v2.9.1 的新项目上遇到了同样的问题，同时有两台服务器运行ning。我意识到我安装了两次 webpack-dev-server 包，一个在我的项目文件夹 node_modules 中，因为它在我的 package.json 中被列为依赖项，另一个是全局安装的，所以我只是删除了本地的。

我提交了一个问题： https://github.com/webpack/webpack-dev-server/issues/1125

Answer 3

除了通过 npm 卸载 devserver 之外，我还必须执行以下操作才能使其正常工作。

从节点模块中手动删除 webpack-dev-server 文件夹。
运行 npm 初始化。

无可否认，这是黑魔法，但一旦完成，它就变得栩栩如生 - 花了 2 个小时在这上面，非常感谢 OP 指出开发服务器运行两次。

webpack-dev-server 运行两次

webpack-dev-server runs twice

javascript

webpack

webpack-dev-server