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/条目适用于应用程序本身？

Answer 1

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

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

有关更多选项和一般信息，请参阅webpack configuration docs，特别是webpack dev server docs。

Answer 2

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

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

Answer 3

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

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

Answer 4

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