Node.js Webpack dev server提供目录列表，而不是应用程序页面

我只能在

/public

下看到实际的应用程序

webpack.config.js

中的配置如下：

var path    = require('path');
var webpack = require('webpack');

module.exports = {

  entry: [
    'webpack-dev-server/client?http://localhost:8080',
    'webpack/hot/only-dev-server',
    './app/js/App.js'
],

  output: {
    path: path.join(__dirname, 'public'),
    filename: 'bundle.js',
    publicPath: 'http://localhost:8080'
  },

  module: {
    loaders: [
      {
        test: /\.js$/,
        loaders: ['react-hot', 'babel-loader'],
        exclude: /node_modules/
      }
     ]
   },

  plugins: [
    new webpack.HotModuleReplacementPlugin(),
    new webpack.NoErrorsPlugin()
  ]

};

项目层次结构是：

• 应用程序
  • js
• 节点单元

• 公开的
  • css

  • img

  bundle.js
  index.html

• package.json

• webpack.config.js

---

如何修改以确保

http://localhost:8080/

条目是针对应用程序本身的？

如果您使用的是webpack的开发服务器，则可以传入选项以使用

/public

作为基本目录

devServer: {
    publicPath: "/",
    contentBase: "./public",
    hot: true
},

---

有关更多选项和一般信息，请参见，特别是。您还可以将

--content base

标志添加到启动脚本中，例如

    "scripts": {
        "start:dev": "webpack-dev-server --inline --content-base ./public"
    }

---

在我的例子中，我在设置

HTMLWebpackPlugin

时拼错了

'index.html'

。如果您正在使用此插件，请仔细检查您的文件名

var HTMLWebpackPlugin = require('html-webpack-plugin');
var HTMLWebpackPluginConfig = new HTMLWebpackPlugin({
  template: __dirname + '/app/index.html',
  filename: 'index.html',
  inject: 'body'
});

---

我不小心删除了index.html，然后我只得到了目录列表。

谢谢你的回答，它让我失去了联系。也谢谢你发布这两个文档的链接。第2页呢？我读了文档，自己也弄不明白。@也许你也想设置publicPath属性。我将更新答案以包含这一点。我不知道如何有人可以从文档中找出这一点。非常感谢。也许考虑重写一些关于这些属性的文档？这帮助我解决了我通过WebPACK获得了一个自动生成的HTML的事实。现在，通过设置这个

模板
参数，我可以毫无问题地指定自己的html。谢谢！