listing directory /

 

webpack-dev-server启动项目时访问localhost:8080会出现 ~ / 这种情况：

 

解决方法：

在webpack配置文件中devServer配置：publicPath: '/'

devServer: {
    publicPath: "/",
    contentBase: "./dist", // 服务启动在哪一个文件夹下
    open: true, // 启动服务时，自动打开浏览器
    port: 8080, // 端口号
    // proxy 跨域时模拟接口代理
    hot: true, // devServer开启Hot Module Replacement的功能
    hotOnly: true // 即便HMP的功能没有生效，浏览器也不能自动刷新
},

 

官网解释：devServer.publicPath

https://www.webpackjs.com/configuration/dev-server/

devServer.publicPath ?
string

此路径下的打包文件可在浏览器中访问。

假设服务器运行在 http://localhost:8080 并且 output.filename 被设置为 bundle.js。默认 publicPath 是 "/"，所以你的包(bundle)可以通过 http://localhost:8080/bundle.js 访问。

可以修改 publicPath，将 bundle 放在一个目录：

publicPath: "/assets/"
你的包现在可以通过 http://localhost:8080/assets/bundle.js 访问。

确保 publicPath 总是以斜杠(/)开头和结尾。
也可以使用一个完整的 URL。这是模块热替换所必需的。

publicPath: "http://localhost:8080/assets/"
bundle 可以通过 http://localhost:8080/assets/bundle.js 访问。

devServer.publicPath 和 output.publicPath 一样被推荐。