webpack：express 找不到包錯誤 404

Question

我知道這個問題被問了很多，但我已經嘗試了一切，但沒有任何效果！ 事情是這樣的：我正在開發一個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 預先感謝您的幫助

Answer 1

您從項目的根目錄啟動腳本。

"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'));

webpack：express 找不到包錯誤 404

問題描述

1 個解決方案

解決方案1
0 2020-09-24 19:26:59

webpack：express 找不到包錯誤 404

問題描述

1 個解決方案

解決方案1 0 2020-09-24 19:26:59

解決方案1
0 2020-09-24 19:26:59