我的Webpack配置问题：运行webpack serve显示目录列表而非页面

你遇到的页面显示目录列表而非目标网页的问题，主要是由几个配置错误和版本兼容性问题导致的，下面逐一拆解并给出修复方案：

1. 脚本命令中的模式拼写错误 #

这是最直接的触发问题！在package.json的start脚本里，你把development拼写成了developent：

"start": "webpack-dev-server --mode developent --open --hot"

拼写错误会让Webpack无法识别正确的运行模式，导致webpack-dev-server没有按预期加载html-webpack-plugin生成的index.html，转而默认展示项目目录结构。

修复： 将developent改为正确的development：

"start": "webpack-dev-server --mode development --open --hot"

2. .babelrc.json 语法错误 #

你的.babelrc.json文件末尾多了一个分号，JSON格式不允许这种语法：

{ "presets" : ["@babel/preset-env", "@babel/preset-react]; }

这个错误会导致Babel编译失败，虽然不是直接触发目录列表的原因，但会破坏项目的正常打包流程，必须修复。

修复： 移除多余的分号：

{ "presets": ["@babel/preset-env", "@babel/preset-react"] }

3. Webpack与webpack-dev-server版本不兼容 #

你使用的webpack@5.3.1属于Webpack 5版本，但搭配的webpack-dev-server@3.11.0是适配Webpack 4的版本，版本不匹配会导致dev-server无法正确处理html-webpack-plugin生成的内存文件，最终 fallback 到目录列表展示。

修复： 升级webpack-dev-server到适配Webpack 5的4.x版本：

npm install webpack-dev-server@latest --save-dev

升级后，推荐使用Webpack 5官方推荐的webpack serve命令替代webpack-dev-server，修改package.json的start脚本：

"start": "webpack serve --mode development --open --hot"

验证修复 #

完成以上修改后，可先删除node_modules和package-lock.json（确保依赖环境干净），重新安装依赖：

rm -rf node_modules package-lock.json
npm install

然后运行npm start，应该就能正常加载你的index.html页面了。

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