内联模式下如何解决webpack-dev-server无法获取/

Question

当我在内联模式下使用webpack-dev-server (1.14.0版)并访问http://127.0.0.1:8080时，结果是Cannot GET /。

​

​

webpack.config.js中的配置为：

devServer: {
    color: true,
    historyApiFallback: false,
    inline: true,
    hot: true,
    contentBase: assetsRoot
}

package.json中的npm脚本为

"scripts": {
    "dev": "webpack-dev-server",
    "build": "webpack -p",
    "clean": "node npm-scripts/del-build.script.js"
}

Answer 1

使用node server.js server.js代码：

var webpack = require('webpack');
var WebpackDevServer = require('webpack-dev-server');
var config = require('../webpack.config');
console.log(config);
// 就是这么“复杂”！
// 往webpack的入口配置中加入 webpack-dev-server/client?http://localhost:8080/ 即可
for (var i of Object.keys(config.entry)){
    config.entry[i].unshift("webpack-dev-server/client?http://localhost:8080/");
}
console.log(config.entry);
var compiler = webpack(config);
var server = new WebpackDevServer(compiler, {

});
server.listen(8080);

Answer 2

我今天遇到了同样的问题，当我试图搜索解决方案时，我看到了这个问题。

首先，我在网页上得到了像你一样的“无法获取/”，然后我发现我把contentBase路径错成了“path.join(__dirname,'/dist')，导致服务器找不到该页面”。

然后我解决了这个问题。在我的webpack.config.js中，devServer设置应该是：

`devServer: {` 
`contentBase: path.join(__dirname, "/client/dist"),`
`compress: true,`
`hot:true,`
`port: 8888,`
`inline:true`
`}`

也许你可以尝试一下，然后再检查一下你的目录。