Webpack-dev-server提供的是一个目录列表而不是应用程序页面。

Question

我只能看到实际应用程序位于/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/入口是针对应用程序本身的？

- Jason Lam

Answer 1

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

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

请参阅webpack配置文档，特别是webpack开发服务器文档以获取更多选项和常规信息。

- Sandals

---

谢谢你的回答，它让我摆脱了困境。还要感谢你发布了两个文档的链接。 - Chris Schmitz

那么webpack 2呢？我看了文档，但自己没搞明白。 - Shahar 'Dawn' Or

@mightyiam，你还需要设置publicPath属性。我会更新答案并包含这一点。 - Sandals

我不知道有谁能从文档中解决这个问题。谢谢。也许考虑重新编写一些关于这些属性的文档？ - Shahar 'Dawn' Or

Answer 2

您可以在启动脚本中添加--content-base标志，例如。

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

- kcstricks

Answer 3

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

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

- spencer.sm

---

这帮助我解决了由webpack自动生成的HTML的问题。现在，通过设置template参数，我可以轻松指定自己的HTML。非常感谢！ - danivicario

这个调试起来相当困难，有什么技巧可以检查 webpack-dev-server 使用的最终路径吗？ - Eric Burel

Answer 4

我不小心删除了index.html文件，然后只显示了目录列表。

- otto