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_modules

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

    • css

    • img

    bundle.js

    index.html

  • package.json

  • webpack.config.js

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


webpack reactjs node.js webpack-dev-server reactjs-flux
person Jason Lam    schedule 28.10.2015    source источник

Ответы (4)


arrow_upward
87
arrow_downward

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

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

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

person Sandals    schedule 28.10.2015
comment
Спасибо за этот ответ, меня это отвлекло. Также спасибо за размещение ссылок на обе документации. - person Chris Schmitz; 15.03.2016
comment
А как насчет webpack 2? Я читал документы и сам не мог понять. - person mightyiam; 13.03.2017
comment
@mightyiam вы также захотите установить свойство publicPath. Я обновлю ответ, чтобы включить это. - person Sandals; 13.03.2017
comment
Я не знаю, как кто-то мог понять это из документации. Спасибо. Может быть, подумайте о том, чтобы переписать часть документации по этим свойствам? - person mightyiam; 14.03.2017

arrow_upward
21
arrow_downward

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

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

arrow_upward
4
arrow_downward

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

var HTMLWebpackPlugin = require('html-webpack-plugin');
var HTMLWebpackPluginConfig = new HTMLWebpackPlugin({
  template: __dirname + '/app/index.html',
  filename: 'index.html',
  inject: 'body'
});
person spencer.sm    schedule 20.05.2017
comment
это помогло мне исправить тот факт, что я получал автоматически сгенерированный HTML с помощью webpack. Теперь, установив этот параметр template, я могу без проблем указать свой собственный html. Большое спасибо! - person danivicario; 03.05.2020

arrow_upward
1
arrow_downward

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

person otto    schedule 02.02.2019