Webpack-dev-server는 앱 페이지 대신 디렉토리 목록을 제공합니다.

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

• node_module

• 일반의

  • css

  • img

  bundle.module을 클릭합니다.

  index.displaces를 표시합니다.

• 패키지.json

• webpack.config.syslog

어떻게 수정하면 다음 사항을 확실하게 할 수 있을까요?http://localhost:8080/신청서 그 자체인가요?

웹 팩의 개발 서버를 사용하는 경우 옵션을 전달하여 사용할 수 있습니다./public기본 디렉토리로 사용합니다.

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

옵션 및 일반 정보에 대해서는 웹 팩컨피규레이션문서, 특히 webpack dev 서버 문서를 참조하십시오.

또한 다음 항목을 추가할 수 있습니다.--content-base시작 스크립트에 플래그를 지정합니다.

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

저 같은 경우에는 철자를 틀렸어요.'index.html'를 셋업 했을 때HTMLWebpackPlugin이 플러그인을 사용하고 있는 경우는, 파일명을 재차 확인해 주세요.

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

실수로 index.html을 삭제하여 디렉토리 목록만 받았습니다.

언급URL : https://stackoverflow.com/questions/33382526/webpack-dev-server-serves-a-directory-list-instead-of-the-app-page