webpack：快递找不到捆绑包错误404答案

【问题标题】：webpack: express can't find bundle Error 404webpack：快递找不到捆绑包错误404
【发布时间】：2021-01-10 21:10:38
【问题描述】：

我知道这个问题被问了很多，但我已经尝试了一切，但没有任何效果！事情是这样的：我正在开发一个 Isomorphic React App 用于练习女巫 2017 年本教程的大副本，我尝试对其进行更新 https://medium.com/@phoebe.greig/headache-free-isomorphic-app-tutorial-react-js-react-router-node-js-ssr-with-state-and-es6-797a8d8e493a

app folder

build folder

她的大部分代码现在已被弃用，我重新编码。一件重要的事情，我使用 webpack 编译应用程序的所有文件夹，包括 index.js 文件，而不是 babel 编译所有文件夹，只使用 webpack 编译 index.js 文件。

问题是我通过 js fonction 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，因为 它无法从 build 文件夹加载 bundle-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;
}

我想从 build 文件夹加载 bundle-app.js 提前感谢您的帮助

【问题讨论】：

标签： javascript reactjs express webpack isomorphic-javascript

【解决方案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'));

【讨论】：

您好，感谢您的回复，要创建项目，我使用以下命令。 npm run build:client 然后 npm run start:dev