JavaScript的

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

我有一个名为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中设置了一个用于启动dev服务器的启动脚本

"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属性并使用默认设置启动dev服务器。

但现在是它变得怪异的时候。 输出看起来像是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

然后，在搜索一些Google后，我发现其他人也有这个unknown property 'error'问题，而且他发生的原因是他有http-server在后台运行。

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

我只发现了另外两个有类似问题的人，他们通过添加inject: false来HtmlWebpackPlugin的配置对象。 这样做并没有使错误消失，并且在没有devServer配置的情况下运行它时，它只是从页面中删除所有js和css，因为它不会将<link>和<script>标记注入到html中。

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

---

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

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

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

---

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

我通过降级到版本2.7.0（2.7.1）来解决问题。

---

除了通过npm卸载devserver之外，我还必须执行以下操作来实现此功能。

手动删除节点模块中的webpack-dev-server文件夹。

运行npm init。

诚然，黑魔法，但一旦完成它来到生活 - 花了2个小时，这非常感谢OP指出，开发服务器运行两次。

链接地址: http://www.djcxy.com/p/40605.html

上一篇: javascript

下一篇: Scrollable table with fixed columns and header, with modern CSS