javascript - org - webpack react 2018
paquete webpack falla al recargar? (1)
Creo que el problema no está en reaccionar a la configuración del enrutador, ¿pero mi index.html no puede detectar mi script? Este es mi error:
Error al cargar el recurso: el servidor respondió con un estado de 404 (No encontrado)
este es mi código de configuración de la carpeta web:
const compiler = webpack({
entry: [''whatwg-fetch'', path.resolve(__dirname, ''js'', ''index.js'')],
module: {
loaders: [
{
exclude: /node_modules/,
loader: ''babel-loader'',
test: //.js$/,
},
{
test: //.css$/,
loaders: [''style-loader'', ''css-loader'']
}
],
},
output: {filename: ''app.js'', path: ''/''},
});
const app = new WebpackDevServer(compiler, {
contentBase: ''/public/'',
proxy: {''/graphql'': `http://localhost:${GRAPHQL_PORT}`},
publicPath: ''/js/'',
stats: {colors: true},
historyApiFallback: {
index: ''index.html''
}
});
y mi index.html
<!doctype html>
<html lang="en" data-framework="relay">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.11/semantic.min.css">
<title>Relay • TodoMVC</title>
</head>
<body>
<div id="root"></div>
<script type="text/javascript">
// Force `fetch` polyfill to workaround Chrome not displaying request body
// in developer tools for the native `fetch`.
self.fetch = null;
</script>
<script src="http://localhost:4000/webpack-dev-server.js"></script>
<script src="js/app.js"></script>
</body>
</html>
¿Ayuda?
Al usar la API de historial HTML5, la página index.html probablemente tendrá que publicarse en lugar de cualquier respuesta 404. Habilítalo pasando:
historyApiFallback: true
En realidad, es un concepto bastante importante que debe comprender, ya que es un componente principal de cualquier aplicación de una sola página (SPA). Además, creo que debes hacer una inmersión profunda en tu archivo de configuración de la carpeta web cuando tengas la oportunidad.
Aquí hay una explicación mejor y enriquecedora sobre la opción historyApiFallback:
Las aplicaciones de una sola página (SPA) normalmente solo utilizan un archivo de índice al que pueden acceder los navegadores web: generalmente index.html. La navegación en la aplicación se maneja comúnmente usando JavaScript con la ayuda de la API de historial de HTML5. Esto genera problemas cuando el usuario pulsa el botón Actualizar o accede directamente a una página que no sea la página de destino, por ejemplo, / help o / help / online, ya que el servidor web omite el archivo de índice para localizar el archivo en esta ubicación. Como su aplicación es un SPA, el servidor web fallará al intentar recuperar el archivo y devolver un mensaje 404 - No Encontrado al usuario.
Dos recursos excelentes: el servidor de desarrollo de Webpack y la documentación de connect-history-api-fallback .