使用Webpack-dev-server运行React项目仅显示目录列表求助

我仔细看了你的配置、项目结构和终端输出，问题主要出在这几个关键点上，咱们一步步来修复：

1. 缺少入口HTML文件 #

你的项目里没有index.html文件，webpack-dev-server找不到要加载的页面入口，所以默认展示了项目的目录结构。你需要添加这个文件来引入打包后的JS代码。

推荐方案：用html-webpack-plugin自动生成 #

这个插件能帮你自动生成符合webpack配置的HTML文件，还能自动引入打包后的资源，步骤如下：

• 先安装依赖：

  npm install --save-dev html-webpack-plugin
  

• 修改webpack.config.js，添加插件和devServer配置：

  const HtmlWebpackPlugin = require('html-webpack-plugin');
  
  module.exports = {
    context: __dirname + "/app",
    entry: "./app.js",
    output: {
      filename: "app.js",
      path: __dirname + "/dist",
    },
    module: {
      rules: [
        {
          test: /\.js$/,
          exclude: /node_modules/,
          loaders: ['babel-loader?presets[]=es2015,presets[]=react'],
        },
      ],
    },
    plugins: [
      new HtmlWebpackPlugin({
        title: 'My React App',
        // 如果手动写了HTML模板，可以加template参数指定路径，否则插件会生成默认模板
      })
    ],
    devServer: {
      contentBase: './dist', // 指定静态资源的根目录
      historyApiFallback: true, // 避免路由刷新出现404
      open: true // 启动后自动打开浏览器
    },
    mode: "development"
  }
  

手动方案（可选） #

如果不想用插件，也可以在app目录下手动创建index.html：

<!DOCTYPE html>
<html>
  <head>
    <title>My React App</title>
  </head>
  <body>
    <div id="root"></div>
    <script src="app.js"></script>
  </body>
</html>

然后把devServer的contentBase改成__dirname + '/app'，让dev-server加载这个手动创建的HTML文件。

2. 补充webpack-dev-server配置 #

你当前的webpack.config.js完全没有devServer配置项，这是dev-server无法定位页面入口的核心原因。加上这个配置后，它才知道该把哪个目录作为静态资源根目录，以及如何处理页面请求。

看你的终端输出里有一行webpack output is served from /，说明打包后的文件被放在了dev-server的根路径下，但没有HTML文件来引入它，浏览器就只能显示目录列表。

3. 优化启动命令（可选） #

可以给webpack-dev-server命令加上--open参数，这样启动后会自动打开浏览器，不用手动输入地址：

"webpack-dev-server": "webpack-dev-server --hot --inline --open"

验证修改 #

做完以上调整后，重新运行npm run webpack-dev-server，浏览器应该会自动打开并加载你的应用，控制台也能看到Hello的输出了。

后续你可以把app.js改成标准的React挂载代码，比如：

import React from 'react';
import ReactDOM from 'react-dom';

ReactDOM.render(<h1>Hello React!</h1>, document.getElementById('root'));

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