Me encontré con un comportamiento extraño al usar Webpack 5. Cuando compilo para producción, todo funciona como se esperaba. Pero cuando intento iniciar un servidor de desarrollo, todos mis activos y archivos .js se reemplazan con el contenido de index.html . Por lo tanto, recibo un error de unexpected token "<" cuando el navegador intenta analizar un archivo .js. En otras palabras, todos los archivos están en su lugar, pero no contienen nada más que marcado HTML. Aquí está mi configuración de salida:

 output: { path: path.resolve(__dirname, 'build'), pathinfo: !isProd, filename: isProd ? 'static/js/[name].[contenthash:8].js' : 'static/js/bundle.js', chunkFilename: isProd ? 'static/js/[name].[contenthash:8].chunk.js' : 'static/js/[name].chunk.js', assetModuleFilename: 'static/media/[name].[hash][ext]', publicPath: process.env.PUBLIC_URL || './', },

Resolver:

 resolve: { modules: ['node_modules'], extensions: ['.js', '.ts', '.tsx', '.json', '.jsx'], alias: { src: path.resolve(__dirname, 'src'), }, },

Y parte de complementos:

 plugins: [ new HtmlWebpackPlugin( Object.assign( {}, { inject: true, template: path.resolve(__dirname, './public/index.html'), }, isProd ? { minify: { removeComments: true, collapseWhitespace: true, removeRedundantAttributes: true, useShortDoctype: true, removeEmptyAttributes: true, removeStyleLinkTypeAttributes: true, keepClosingSlash: true, minifyJS: true, minifyCSS: true, minifyURLs: true, }, } : undefined, ), ), new MiniCssExtractPlugin({ filename: 'static/css/[name].[contenthash:8].css', chunkFilename: 'static/css/[name].[contenthash:8].chunk.css', }), new webpack.DefinePlugin({ REACT_APP_API: `"${process.env.REACT_APP_API}"`, REACT_APP_BASENAME: `"${process.env.REACT_APP_BASENAME}"`, PUBLIC_URL: `"${process.env.PUBLIC_URL || '.'}"`, }), // new BundleAnalyzerPlugin(), ],

No tengo ni idea de con qué empezar. Agradecería si alguien pudiera ayudarme con eso.