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中设置了一个启动脚本来启动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属性并使用默认设置启动开发服务器.

但现在是时候变得奇怪了.如果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'问题.

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

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

Answer 1

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

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

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