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

};

иерархия проекта это:

  • app

    • js

  • папки node_modules

  • общественные

    • css

    • img

    пакета.js

    .HTML-код

  • пакета.json

  • webpack.конфиг.js

как я могу изменить, чтобы убедиться, что http://localhost:8080/ запись предназначена для приложения как такового?

3 63
node.js reactjs webpack webpack-dev-server reactjs-flux

3 ответа:

Если вы используете сервер разработки webpack, вы можете передать параметры для использования /public как базовый каталог.

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

посмотреть webpack configuration docs и особенно webpack dev server docs для получения дополнительной информации и общей информации.

56

вы также можете добавить --content-base флаг для вашего сценария запуска, например

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

В моем случае, я неправильно 'index.html' когда я HTMLWebpackPlugin. Дважды проверьте свои имена файлов, если вы используете этот плагин.

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