Webpack-dev-server 提供目录列表而不是应用程序页面答案

【问题标题】：Webpack-dev-server serves a directory list instead of the app pageWebpack-dev-server 提供目录列表而不是应用程序页面
【发布时间】：2016-01-27 17:21:30
【问题描述】：

我只能看到/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
node_modules
公开
- css
- img
bundle.js

index.html
package.json
webpack.config.js

如何修改以确保 http://localhost:8080/ 条目是针对应用程序本身的？

【问题讨论】：

标签： node.js reactjs webpack reactjs-flux webpack-dev-server

【解决方案1】：

如果你使用 webpack 的开发服务器，你可以传入选项以使用 /public 作为基本目录。

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

请参阅webpack configuration docs，尤其是webpack dev server docs，了解更多选项和一般信息。

【讨论】：

感谢您的回答，这让我感到困惑。还要感谢您发布这两个文档的链接。
webpack 2 怎么样？我阅读了文档，但自己无法弄清楚。
@mightyiam 你也想设置 publicPath 属性。我会更新答案以包括这一点。
我不知道任何人如何从文档中弄清楚这一点。谢谢你。也许考虑重写一些关于这些属性的文档？

【解决方案2】：

您还可以将--content-base 标志添加到您的启动脚本中，例如

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

【讨论】：

【解决方案3】：

就我而言，我在设置HTMLWebpackPlugin 时拼错了'index.html'。如果您正在使用此插件，请仔细检查您的文件名。

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

【讨论】：

这帮助我解决了我正在通过 webpack 获取自动生成的 HTML 的事实。现在，通过设置这个template 参数，我可以毫无问题地指定我自己的html。非常感谢！

【解决方案4】：

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

【讨论】：