javascript – webpack-dev-server运行两次

前端之家收集整理的这篇文章主要介绍了javascript – webpack-dev-server运行两次前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我试图以几种不同的方式解决这个问题,所以我必须从头开始.

我有一个名为webpack.dev.js的配置文件,如下图所示:

  1. const path = require("path");
  2.  
  3. const HtmlWebpackPlugin = require("html-webpack-plugin");
  4. const ExtractTextPlugin = require("extract-text-webpack-plugin");
  5. const CopyWebpackPlugin = require("copy-webpack-plugin");
  6.  
  7. module.exports = {
  8. entry: "./src/script.js",output: {
  9. filename: "bundle.js",path: path.resolve(__dirname,"dist")
  10. },devtool: "inline-source-map",devServer: {
  11. contentBase: path.join(__dirname,module: {
  12. rules: [
  13. {
  14. test: /\.js$/,exclude: /node_modules/,use: {
  15. loader: "babel-loader",options: {
  16. presets: ["env"]
  17. }
  18. }
  19. },{
  20. test: /\.scss$/,use: ExtractTextPlugin.extract({
  21. fallback: "style-loader",use: ["css-loader","postcss-loader","sass-loader"]
  22. })
  23. }
  24. ]
  25. },plugins: [
  26. new HtmlWebpackPlugin({template: path.join("src","index.html")}),new ExtractTextPlugin("style.css"),new CopyWebpackPlugin([{from: "src/images",to: "images"}])
  27. ]
  28. };

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

“开始”:“webpack-dev-server –config webpack.dev.js”

现在是问题的开始.当我运行脚本时,我收到以下错误

  1. Invalid configuration object. webpack-dev-server has been initialized using a configuration object that does not match the API schema.
  2. - configuration has an unknown property 'error'. These properties are valid:
  3. 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? }

如您所见,此错误非常令人困惑,因为配置文件中没有任何错误属性

在尝试了不同的方法解决这个问题后,我尝试删除devServer属性并使用默认设置启动dev服务器.

但现在是时候变得奇怪了.如果Web服务器启动了两次,输出看起来如下:

  1. Project is running at http://localhost:8080/
  2. webpack output is served from /
  3. Project is running at http://localhost:8081/
  4. webpack output is served from /

之后,它记录了几个警告,其中有多个模块的名称只有套管不同

然后经过一些谷歌搜索后,我发现其他人也有这个未知的属性错误”问题,并且发生在他身上的原因是他在背景中运行了http服务器.

所以现在,我的理论是,由于某种原因,webpack-dev-server并行运行两次,并且会产生竞争条件或错误,从而触发此未知属性的“错误”问题.

我只发现另外两个有类似问题的人,他们通过向HtmlWebpackPlugin的配置对象添加inject:false来修复它们.这样做并没有使错误消失,并且在没有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

猜你在找的JavaScript相关文章