Webpack-dev-server obsługuje listę katalogów zamiast strony aplikacji

92

wprowadź opis obrazu tutaj

Rzeczywistą aplikację widzę tylko pod /public.

Konfiguracje w webpack.config.jssą poniżej:

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

};

Hierarchia projektu to:

  • aplikacja

    • js
  • node_modules

  • publiczny

    • css

    • img

    bundle.js

    index.html

  • package.json

  • webpack.config.js

Jak mogę zmodyfikować, aby upewnić się, że http://localhost:8080/wpis dotyczy aplikacji jako takiej?

Jason Lam
źródło

Odpowiedzi:

78

Jeśli używasz serwera deweloperskiego webpacka, możesz przekazać opcje, aby użyć go /publicjako katalogu podstawowego.

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

Więcej opcji i ogólnych informacji można znaleźć w dokumentacji konfiguracyjnej pakietu webpack , a konkretnie w dokumentacji serwera deweloperskiego pakietu webpack .

Sandały
źródło
1
Dzięki za tę odpowiedź, wyskoczyła mi. Dziękuję również za zamieszczenie linków do obu dokumentów.
Chris Schmitz
3
A co z pakietem webpack 2? Przeczytałem dokumenty i sam nie mogłem tego rozgryźć.
mightyiam
@mightyiam, również będziesz chciał ustawić właściwość publicPath. Zaktualizuję, aby odpowiedzieć, aby to uwzględnić.
Sandały
1
Nie wiem, jak ktokolwiek mógłby to zrozumieć na podstawie dokumentacji. Dziękuję Ci. Może rozważ przepisanie części dokumentacji dotyczącej tych nieruchomości?
mightyiam
17

Możesz również dodać --content-baseflagę do swojego skryptu startowego, np

    "scripts": {
        "start:dev": "webpack-dev-server --inline --content-base ./public"
    }
kcstricks
źródło
4

W moim przypadku błędnie wpisałem się 'index.html'podczas konfigurowania HTMLWebpackPlugin. Dokładnie sprawdź nazwy plików, jeśli używasz tej wtyczki.

var HTMLWebpackPlugin = require('html-webpack-plugin');
var HTMLWebpackPluginConfig = new HTMLWebpackPlugin({
  template: __dirname + '/app/index.html',
  filename: 'index.html',
  inject: 'body'
});
spencer.sm
źródło
pomogło mi to naprawić fakt, że otrzymywałem automatycznie generowany kod HTML przez pakiet webpack. Teraz, ustawiając ten templateparametr, mogę bez problemu określić własny kod HTML. Wielkie dzięki!
danivicario
1

Przez przypadek usunąłem plik index.html i wtedy dostałem tylko listę katalogów.

wwwwwwwwwwww
źródło