node.js - react - webpack tutorial español

Webpack-dev-server sirve una lista de directorios en lugar de la página de la aplicación

Question

Solo puedo ver la aplicación real en /public .

Las configuraciones en webpack.config.js están a continuación:

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

La jerarquía del proyecto es:

• aplicación

  • js

• nodo_módulos

• público

  • css

  • img

  bundle.js

  index.html

• package.json

• webpack.config.js

¿Cómo puedo modificar para asegurarme de que http://localhost:8080/ entry es para la aplicación per se?

Answer 1

Accidentalmente eliminé index.html y luego obtuve solo la lista de directorios.

Answer 2

En mi caso, HTMLWebpackPlugin mal ''index.html'' cuando configuré HTMLWebpackPlugin . Verifique sus nombres de archivo si está usando este complemento.

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

Answer 3

Si está utilizando el servidor de desarrollo de webpack, puede pasar opciones para usar /public como directorio base.

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

Consulte los documentos de configuración de webpack , y específicamente los documentos del servidor de desarrollo webpack para obtener más opciones e información general.

Answer 4

También puede agregar el --content-base a su script de inicio, p. Ej.

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