Webpack-dev-server cung cấp danh sách thư mục thay vì trang ứng dụng

Tôi chỉ có thể thấy ứng dụng thực tế bên dưới /public.

Các cấu hình webpack.config.jsbên dưới:

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()
  ]

};

Hệ thống phân cấp dự án là:

• ứng dụng

  • js

• node_modules

• công cộng

  • css

  • img

  bó.js

  index.html

• package.json

• webpack.config.js

Làm cách nào tôi có thể sửa đổi để đảm bảo http://localhost:8080/mục nhập là dành cho ứng dụng?

Nếu bạn đang sử dụng máy chủ nhà phát triển của webpack, bạn có thể chuyển vào các tùy chọn để sử dụng /publiclàm thư mục cơ sở.

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

Xem tài liệu cấu hình webpack và cụ thể là tài liệu máy chủ webpack dev để biết thêm tùy chọn và thông tin chung.

Bạn cũng có thể thêm --content-basecờ vào tập lệnh khởi động của mình, ví dụ:

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

Trong trường hợp của tôi, tôi đã viết sai chính tả 'index.html'khi thiết lập HTMLWebpackPlugin. Kiểm tra kỹ tên tệp của bạn nếu bạn đang sử dụng plugin này.

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

Tôi đã vô tình xóa index.html và sau đó tôi chỉ nhận được danh sách thư mục.