配置webpack-dev-server后无法提供文件服务，如何解决？

嘿，我一眼就看出问题啦——你用错启动命令了！webpack 命令只是执行普通的打包编译流程，并不会启动webpack-dev-server开发服务器，这就是为什么你看不到服务器监听连接、访问端口也没内容的原因。

下面给你一步步解决的方法：

1. 配置package.json的启动脚本 #

首先打开你的package.json，在scripts字段里添加启动devServer的命令，这样后续启动会更方便：

{
  "name": "your-project-name",
  "version": "1.0.0",
  "scripts": {
    "start": "webpack-dev-server --open",
    "build": "webpack"
  },
  // 其他依赖字段...
}

• webpack-dev-server才是真正启动开发服务器的命令；
• --open参数可以让服务器启动后自动打开浏览器，省得你手动输入地址。

2. 确保dist目录有入口HTML文件 #

就算服务器启动了，如果你的dist目录里没有index.html，访问http://localhost:9999也会显示空白或者404。你需要在dist目录下创建这个文件，并且正确引入打包后的bundle.js：

<!-- dist/index.html -->
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>Webpack Dev Demo</title>
</head>
<body>
  <!-- 注意你的bundle.js在dist/js目录下，所以路径要写对 -->
  <script src="./js/bundle.js"></script>
</body>
</html>

3. 启动开发服务器 #

现在在终端里运行：

npm start

（如果你用yarn的话就运行yarn start）

这时候你就能看到终端里显示服务器正在监听9999端口，浏览器也会自动打开http://localhost:9999，页面就能正常加载啦！

另外补充个小细节：如果你不想配置package.json的scripts，也可以直接在终端运行npx webpack-dev-server来启动服务器，不过配置scripts显然更省心~

内容的提问来源于stack exchange，提问作者bob