[英]webpack-dev-server runs twice
我试图以几种不同的方式解决此问题,所以我必须从头开始。
我有一个名为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
属性并使用默认设置启动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
然后经过一番谷歌搜索,我发现其他人也有这个unknown property 'error'
问题,发生在他身上的原因是他的后台运行了http-server
。
所以现在,我的理论是,由于某种原因,webpack-dev-server并行运行两次,这会产生竞争条件或错误,从而触发此unknown property 'error'
问题。
我只发现了另外两个有类似问题的人,他们只是通过在HtmlWebpackPlugin
的配置对象中添加inject: false
来HtmlWebpackPlugin
。 这样做并没有使错误消失,并且在没有devServer配置的情况下运行它时,它只是从页面中删除了所有js和CSS,因为它没有将<link>
和<script>
标记注入html中。
在这一点上,我不知道如何解决此问题,这就是为什么我问是否有人可以帮助我。
似乎与webpack-dev-server
版本2.8.0有关。
我通过降级到〜2.7.0(2.7.1)解决了这个问题。
在您的项目文件夹中,运行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
除了通过npm卸载devserver外,我还必须执行以下操作才能使此工作正常进行。
不可思议的是,Black Magic得以实现,但它变成了现实-花了2个小时在此上非常感谢OP指出开发服务器运行了两次。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.