Webpack-dev-server обслуживает список каталогов вместо страницы приложения

72

Изображение 171

Я могу видеть только фактическое приложение под /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/ для приложения сама по себе?

Теги:
webpack
webpack-dev-server
reactjs-flux

4 ответа

60
Лучший ответ

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

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

См. Документацию по настройке веб-пакета и, в частности, документацию по серверу разработчика веб-пакета для получения дополнительных опций и общей информации.

  • 0
    Оно работает! Спасибо! Я пойду нырять в документы прямо сейчас.
  • 1
    Спасибо за этот ответ, он отклеил меня. Также спасибо за размещение ссылок на обе документации.
Показать ещё 3 комментария
15

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

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

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

var HTMLWebpackPlugin = require('html-webpack-plugin');
var HTMLWebpackPluginConfig = new HTMLWebpackPlugin({
  template: __dirname + '/app/index.html',
  filename: 'index.html',
  inject: 'body'
});
  • 0
    У меня была та же проблема, я неправильно написал свой файл index.html, большое спасибо ...
0

Я случайно удалил index.html, а затем получил только список каталогов.

Ещё вопросы

Сообщество Overcoder
Наверх
Меню