Webpack-dev-server fornece uma lista de diretórios em vez da página do aplicativo

96

insira a descrição da imagem aqui

Só consigo ver o aplicativo real em /public.

As configurações em webpack.config.jsestão abaixo:

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

};

A hierarquia do projeto é:

  • aplicativo

    • js
  • node_modules

  • público

    • css

    • img

    bundle.js

    index.html

  • package.json

  • webpack.config.js

Como posso modificar para ter certeza de que a http://localhost:8080/entrada é para o aplicativo em si?

Jason Lam
fonte

Respostas:

80

Se você estiver usando o servidor dev do webpack, pode passar opções para usar /publiccomo diretório base.

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

Consulte os documentos de configuração do webpack e, especificamente, os documentos do servidor de desenvolvimento do webpack para obter mais opções e informações gerais.

Sandálias
fonte
1
Obrigado por esta resposta, ela me desvencilhou. Obrigado também por postar os links para ambas as documentações.
Chris Schmitz
3
E quanto ao webpack 2? Eu li os documentos e não consegui descobrir sozinho.
mightyiam
@mightyiam, você também vai querer definir a propriedade publicPath. Vou atualizar para responder para incluir isso.
Sandals
1
Não sei como alguém poderia descobrir isso a partir da documentação. Obrigado. Talvez você considere reescrever parte da documentação dessas propriedades?
mightyiam
18

Você também pode adicionar a --content-basebandeira ao seu script de inicialização, por exemplo

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

No meu caso, escrevi incorretamente 'index.html'ao configurar o HTMLWebpackPlugin. Verifique novamente os nomes dos arquivos se estiver usando este plugin.

var HTMLWebpackPlugin = require('html-webpack-plugin');
var HTMLWebpackPluginConfig = new HTMLWebpackPlugin({
  template: __dirname + '/app/index.html',
  filename: 'index.html',
  inject: 'body'
});
spencer.sm
fonte
isso me ajudou a consertar o fato de que estava obtendo um HTML gerado automaticamente pelo webpack. Agora, ao definir este templateparâmetro, posso especificar meu próprio html sem problemas. Muito obrigado!
danivicario
1

Eu tinha removido acidentalmente index.html e então obtive apenas a lista de diretórios.

Tobias
fonte