Soy un desarrollador back-end, tratando de elegir y ejecutar una aplicación React simple, pero tengo algunas dificultades. A pesar de varias horas de investigación y aumento en React/WebPack/etc, no puedo entender lo siguiente:

Si solo ejecuto npm run build && npm run start obtengo un 404. Eventualmente descubrí que esto se debe a que está buscando index.html en el subdirectorio public , mientras que actualmente vive en la carpeta raíz.

Lo moví a una carpeta public y esta vez muestra una página vacía. Descubrí que esto se debe a que el HTML hace referencia ./dist/bundle.js . Pero, por supuesto, la carpeta dist está fuera de la raíz (donde solía estar index.html , pero ahora está en public ). ../dist/bundle.js , pero como era de esperar, esto no funcionó.

Entonces, puedo tener index.html en el directorio raíz y encontrar una manera de hacer que WebPack lo encuentre allí, o ponerlo en public y encontrar una manera de hacer referencia a dist/bundle.js .

Como experimento, copié manualmente bundle.js en public y actualicé la etiqueta del script, y parecía funcionar bien.

Estoy seguro de que esto es simple para las personas que han vivido en esta pila por un tiempo. Estoy incluyendo archivos de configuración a continuación si ayuda.

package.json :

 { // <Omitted> "main": "index.tsx", "scripts": { "build": "webpack", "watch": "webpack --watch", "start": "webpack serve --open" }, "dependencies": { // <Omitted> "react": "^17.0.2", "react-dom": "^17.0.2" }, "devDependencies": { "@types/node": "^17.0.5", "@types/react-dom": "^17.0.11", "ts-loader": "^9.2.6", "typescript": "~4.5.5", "webpack": "^5.68.0", "webpack-cli": "^4.9.2", "webpack-dev-server": "^4.7.4" } }

WebPack.config.js :

 "use strict"; const path = require("path"); module.exports = { entry: "./src/index.tsx", devServer: { port: 3000 }, output: { filename: "bundle.js" }, module: { rules: [ { test: /\.tsx?$/, loader: "ts-loader" } ] }, resolve: { extensions: [".ts", ".tsx", ".js", ".jsx"] }, mode: "development", devtool: "source-map" };