Webpack-dev-server menyajikan daftar direktori, bukan halaman aplikasi

93

Saya hanya dapat melihat aplikasi sebenarnya di bawah /public.

Konfigurasi di webpack.config.jsbawah ini:

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

};

Hierarki proyek adalah:

aplikasi
- js
node_modules
publik
- css
- img
bundle.js

index.html
package.json
webpack.config.js

Bagaimana saya bisa memodifikasi untuk memastikan http://localhost:8080/entri itu untuk aplikasi itu sendiri?

— Jason Lam
sumber

79

Jika Anda menggunakan server dev webpack, Anda dapat memberikan opsi untuk digunakan /publicsebagai direktori dasar.

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

Lihat dokumen konfigurasi webpack , dan secara khusus dokumen server webpack dev untuk opsi selengkapnya dan informasi umum.

— Sandal
sumber

1

Terima kasih atas jawaban ini, saya tidak terjebak. Juga terima kasih telah memposting tautan ke kedua dokumentasi tersebut.

— Chris Schmitz

3

Bagaimana dengan webpack 2? Saya membaca dokumen dan tidak bisa memahaminya sendiri.

— mightyiam

@mightyiam Anda akan ingin menyetel properti publicPath juga. Saya akan memperbarui untuk menjawab untuk memasukkan itu.

— Sandal

1

Saya tidak tahu bagaimana orang bisa mengetahui hal ini dari dokumentasi. Terima kasih. Mungkin pertimbangkan untuk menulis ulang beberapa dokumentasi tentang properti tersebut?

— mightyiam

17

Anda juga dapat menambahkan --content-basebendera ke skrip start-up Anda, misalnya

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

— kcstricks
sumber

4

Dalam kasus saya, saya salah mengeja 'index.html'saat menyiapkan HTMLWebpackPlugin. Periksa kembali nama file Anda jika Anda menggunakan plugin ini.

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

— spencer.sm
sumber

ini membantu saya untuk memperbaiki fakta bahwa saya mendapatkan HTML yang dibuat secara otomatis oleh webpack. Sekarang, dengan mengatur templateparameter ini saya dapat menentukan html saya sendiri tanpa masalah. Terima kasih banyak!

— danivicario

1

Saya tidak sengaja menghapus index.html dan kemudian saya hanya mendapatkan daftar direktori.

— wwwwwwwwwwww
sumber