Webpack-dev-server 提供目录列表而不是应用程序页面 [英] Webpack-dev-server serves a directory list instead of the app page

问题描述

我只能在 /public 下看到实际的应用.

I can only see the actual app under /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

node_modules

公开

• css

img

bundle.js

index.html

package.json

package.json

webpack.config.js

webpack.config.js

如何修改以确保 http://localhost:8080/ 条目适用于应用程序本身?

How can I modify to make sure the http://localhost:8080/ entry is for the application per se?

推荐答案

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

If you're using webpack's dev server you can pass in options to use /public as a base directory.

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

请参阅 webpack 配置文档，特别是 webpack 开发服务器文档 了解更多选项和一般信息.

See the webpack configuration docs, and specifically the webpack dev server docs for more options and general information.

这篇关于Webpack-dev-server 提供目录列表而不是应用程序页面的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！