[英]webpack: express can't find bundle Error 404
我知道这个问题被问了很多,但我已经尝试了一切,但没有任何效果! 事情是这样的:我正在开发一个Isomorphic React App,用于练习 2017 年本教程的大副本,我尝试更新它https://medium.com/@phoebe.greig/headache-free-isomorphic-app-教程-react-js-react-router-node-js-ssr-with-state-and-es6-797a8d8e493a
她的代码的很大一部分现在已被弃用,我对其进行了重新编码。 一件重要的事情,我使用 webpack 来编译应用程序的所有文件夹,包括 index.js 文件,而不是像她那样编译所有文件夹的 babel 和 index.js 文件的 webpack。
问题是我通过 js函数 renderFullPage.js呈现我的 HTML 页面
export default function renderFullPage(html, preloadedState)
return `
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8"/>
<title> Isomorphic Router React Mongoose App initialised with data</title>
</head>
<body>
<div id="root">
${html}
</div>
<script>
window.__PRELOADED_STATE__ = ${JSON.stringify(preloadedState).replace(/</g, '\\u003c')}
</script>
<script type="application/javascript" src="bundle-app.js"></script>
</body>
</html>
`;
}
我的目标是向快速服务器调用请求,该服务器将收集 Mongoose MongoDB 的数据并将其发送回客户端。 在继续使用 React 之前,我想通过使用 console.log 来检查客户端中的一些数据是否一切正常。使用 React 完美加载 HTML 问题:客户端中没有 console.log 显示,因为它无法加载包-app.js 文件来自构建文件夹。 我每次都会收到错误 404,我相信这是因为我的路径设置错误,但我不知道我做错了什么。 加载脚本 http://localhost:8080/bundle-app.js 时出错我不知道我的服务器也在什么路径上被加载。
这是来自 app/server 的 app.js 文件:
import path from 'path';
import express from 'express';
import cors from 'cors';
import router from './router';
const app = express();
const assets = express.static(path.join(__dirname,'../'));
app.use(cors());
app.use(assets);
app.get("*", router);
export default app;
这里还有 webpack.config.js:
{
"name": "ssr-react-router-mongoose-isomorphic-app",
"version": "1.0.0",
"description": "isomorpic app",
"main": "./app/index.js",
"scripts": {
"build:server": "babel ./app/server -d build/server",
"build:watch:server": "babel ./app/server -d build/server --watch",
"build:client": "webpack --mode development --config webpack.config.js/ --progress ",
"build:watch:client": "webpack-dev-server -d --hot --config webpack.config.js --watch",
"build:prod": "npm run build:server && npm run build:client",
"start": "npm run build:prod && NODE_ENV=production node ./build/server/index.js",
"start:dev": "parallelshell \"npm run build:watch:client\" \"nodemon ./build/server/bundle-server.js\" ",
"start:dev:client": "webpack-dev-server"
},
"author": "Rando Mathias",
"license": "ISC",
"dependencies": {
"babel-polyfill": "^6.26.0",
"cors": "^2.8.5",
"express": "^4.17.1",
"mongoose": "^5.10.6",
"react": "^16.13.1",
"react-dom": "^16.13.1",
"react-router-dom": "^5.2.0"
},
"devDependencies": {
"@babel/cli": "^7.11.6",
"@babel/core": "^7.11.6",
"@babel/preset-env": "^7.11.5",
"@babel/preset-react": "^7.10.4",
"babel-loader": "^8.1.0",
"file-loader": "^6.1.0",
"html-webpack-plugin": "^4.5.0",
"nodemon": "^2.0.4",
"parallelshell": "^3.0.1",
"webpack": "^4.44.2",
"webpack-cli": "^3.3.12",
"webpack-dev-server": "^3.11.0"
}
}
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
var fs = require('fs');
var nodeModules = {};
fs.readdirSync('node_modules')
.filter(function(x) {
return ['.bin'].indexOf(x) === -1;
})
.forEach(function(mod) {
nodeModules[mod] = 'commonjs ' + mod;
});
var config = { // la configuration commune pour les 2 modes.
devtool: 'inline-source-map',
context: path.resolve(__dirname, './app'),
entry: {
'/bundle-app': ['babel-polyfill','./index.js'],
'/components/bundle-components': ['./components/App.js','./components/Home.js'],
'/server/bundle-server': ['./server/app.js','./server/index.js','./server/renderFullPage.js','./server/router.js','./server/routes.js'],
'/services/bundle-services': './services/getMongoose_data.js'
},
target:'node',
output:
{
path: path.resolve(__dirname, './build'), // on crée l'application de sortie dans un dossier "public"
publicPath: '/',
filename: '[name].js', // les fichier bundle seront dans le chemin qui est le nom des fichiers d'entrées
},
module:
{
rules: [
{
test: /\.(js|jsx)$/, // pour les fichiers de type js et jsx
loader: 'babel-loader', // on charge babel un transcompileur
exclude: /node_modules/,
options:
{
presets: ['@babel/preset-env', '@babel/preset-react']
}
},
]
},
// plugins: [
// new HtmlWebpackPlugin({
// template: './app/server/renderFullPage.js',
// filename: 'index.html',
// inject: 'body',
// }),
// ],
};
module.exports = (env, argv) =>
{
return config;
}
我想从构建文件夹中加载 bundle-app.js 预先感谢您的帮助
您从项目的根目录启动脚本。
"start": "npm run build:prod && NODE_ENV=production node ./build/server/index.js",
并尝试通过如下设置 pass 来访问静态文件。
const assets = express.static(path.join(__dirname,'../'));
但这里的问题是路径应该相对于脚本启动文件夹。
在您的情况下,它是您执行npm start
命令的项目根文件夹。
您需要更改静态文件路径以设置为相对于您的项目根目录而不是服务器包。
如果我是对的,它将如下所示。
const assets = express.static(path.join('./build'));
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.