Mi sitio web no se carga porque la solicitud de bundle.js devuelve el archivo index.html.
Este proyecto es de hace unos años y en ese momento funcionó bien, pero estoy tratando de ponerlo en marcha nuevamente y no estoy seguro de por qué sucede esto ahora. Si alguien puede ayudar, ¡realmente lo agradecería!
Estructura del archivo:
- src - app - db - public - assets (folder) - styles (folder) - index.html - server - auth (folder) - routers (folder) - server.js - webpack.config.jswebpack.config.js:
var webpack = require('webpack'); var path = require('path'); module.exports = { entry: path.resolve(__dirname, 'src/app', 'client.jsx'), output: { path: path.resolve(__dirname, 'src/public/build'), filename: 'bundle.js' }, module: { rules: [ { test: /\.jsx?$/, include: path.resolve(__dirname, 'src/app'), loader: 'babel-loader' } ] }, devtool: 'source-map' };De index.html:
<body> <div id="app"></div> <!-- load the app scripts --> <script src="/build/bundle.js"></script> </body>Desde servidor.js:
app.use(express.static(path.resolve(__dirname, '../public'))); app.use('*', function (request, response){ response.sendFile(path.resolve(__dirname, '../public', 'index.html')) })Desde paquete.json:
"scripts": { "start": "webpack --watch | nodemon --ignore node_modules ./src/server/server.js --exec babel-node" },De .babaelrc:
{ "presets": [ "@babel/preset-env", "@babel/preset-react", "airbnb" ], "plugins": [ ["@babel/plugin-proposal-decorators", { "legacy": true }], ["@babel/plugin-proposal-class-properties", { "loose": true }], "react-html-attrs", "transform-class-properties", ] }[la reputación es demasiado baja para comentar]
Todo parece kosher, así que estoy de acuerdo con @eol, el primer paso es transpilar y confirmar que la compilación funciona según lo previsto.
Como un aparte semi-relacionado, creo que debería mover la resolución de la ruta en el controlador de solicitud principal para que sea una constante que solo se invoque y resuelva una vez ... probablemente una ganancia mínima, pero tal como está, cada solicitud tiene la misma ruta resuelta .
const indexFile = path.resolve(__dirname, '../public', 'index.html'); app.use('*', function (request, response) { response.sendFile(indexFile); });(Esto no es relevante para el primer controlador, ya que la resolución solo ocurrirá una vez cuando se invoque el método estático).
Con respecto al script de inicio: no creo que desee canalizar la salida del comando webpack --watch a nodemon . Probablemente desee presionar el comando webpack para que se ejecute en segundo plano y luego ejecutar nodemon. Ni siquiera creo que webpack watch realmente salga, por lo que nunca se llamará a nodemon.
Prueba webpack --watch & nodemon ... .
No veo nada que salte a la vista en cuanto a por qué la compilación no funcionaría además de eso ... ¿se compila si solo ejecuta webpack en su terminal en el directorio raíz?