Webpack-dev-Server dient eine Verzeichnisliste anstelle der App-Seite

Question

kann ich nur die tatsächliche app unter /public sehen.

Die configs in webpack.config.js sind unten:

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

}; 

Die Hierarchie Projekt:

• app

  • js

• node_modules

• öffentliche

  • css

  • img

  bundle.js

  index.html

• package.json

• webpack.config.js

Wie kann ich sicherstellen, ändern die http://localhost:8080/ Eintrag für die Anwendung ist per se?

Answer 1

Wenn Sie den dev-Server von webpack verwenden, können Sie Optionen übergeben, um /public als Basisverzeichnis zu verwenden.

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

Siehe webpack configuration docs und insbesondere die webpack dev server docs für mehr Optionen und allgemeine Informationen.

Answer 2

Sie können auch das Flag --content-base zu Ihrem Start-Skript hinzufügen, z.

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

Answer 3

In meinem Fall, ich falsch geschrieben 'index.html', wenn ich die HTMLWebpackPlugin einrichten. Überprüfen Sie Ihre Dateinamen, wenn Sie dieses Plugin verwenden.

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