Fatal编程技术网
  • node.js/
  • Node.js React.js with Express：将Express用作服务器时在客户端呈现简单组件？

Node.js React.js with Express：将Express用作服务器时在客户端呈现简单组件？

node.js reactjs express webpack

Node.js React.js with Express：将Express用作服务器时在客户端呈现简单组件？,node.js,reactjs,express,webpack,webpack-dev-server,Node.js,Reactjs,Express,Webpack,Webpack Dev Server,我是ReactJS和Node.js的新手，我肯定被卡住了。我的问题是无法在index.html文件中呈现简单的React组件。当我在终端中写入webpack时，它会输出一个bundle.js文件。然后，当我使用npm start脚本启动webpack dev服务器时，它会运行，我可以转到localhost:3000，它会输出以下内容： . 这意味着它不会输出 当我转到localhost:3000/bundle/bundle.js时，它会在浏览器中输出bundle.js文件 我还尝试在终端中使用n

我是ReactJS和Node.js的新手，我肯定被卡住了。我的问题是无法在index.html文件中呈现简单的React组件。当我在终端中写入
webpack
时，它会输出一个
bundle.js
文件。然后，当我使用
npm start
脚本启动webpack dev服务器时，它会运行，我可以转到
localhost:3000
，它会输出以下内容： . 这意味着它不会输出

当我转到
localhost:3000/bundle/bundle.js
时，它会在浏览器中输出
bundle.js
文件

我还尝试在终端中使用
node app.js
启动服务器，当我转到
localhost:3000
时，它启动服务器并呈现
index.html
文件，但它没有加载
bundle.js
脚本，而是404。我曾尝试以多种方式（../bundle/bundle.js等）编写src属性，但无法使其正常工作

下面的文件夹结构。我希望它可读

root
  bundle
    bundle.js
  src
    App.jsx
  static
    index.html
  app.js
  package.json
  webpack.config.js
无论如何，我已经搜索了几个小时，但我找不到任何解决方案，所以我希望有人能帮助我。我将在下面发布相关文件。干杯

app.js

var express = require('express');
var mongoose = require('mongoose');
var bodyParser = require('body-parser');
var user = require('./models/userModel');

var app = express();

app.use(express.static('static'));

var port = process.env.PORT || 3000;

app.use(bodyParser.json());

app.listen(port);

var webpack = require('webpack');
var path = require('path');

var DEV = path.resolve(__dirname, 'src');
var OUTPUT = path.resolve(__dirname, 'bundle');

var Config = {
  entry: [
    'webpack-dev-server/client?http://localhost:3000',
    'webpack/hot/only-dev-server',
    DEV + '/App.jsx'
  ],
  module: {
    loaders: [{
      exclude: './node_modules/',
      loaders: ['react-hot', 'babel-loader']
    }]
  },
  output: {
    path: OUTPUT,
    filename: 'bundle.js'
  },
  devServer: {
    inline: true
  },
  plugins: [
    new webpack.HotModuleReplacementPlugin()
  ]
};

module.exports = Config;
index.html

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>Forum</title>
</head>

<body>
  <script src="../bundle/bundle.js"></script>
  <div id="app"></div>
</body>

</html>
package.json

{
  "name": "forum",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start": "webpack-dev-server --port 3000"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "body-parser": "^1.15.2",
    "express": "^4.14.0",
    "mongoose": "^4.7.6",
    "react": "^15.4.1",
    "react-dom": "^15.4.1"
  },
  "devDependencies": {
    "babel": "^6.5.2",
    "babel-core": "^6.21.0",
    "babel-loader": "^6.2.10",
    "babel-preset-es2015": "^6.18.0",
    "babel-preset-react": "^6.16.0",
    "react-hot-loader": "^1.3.1",
    "webpack": "^1.14.0",
    "webpack-dev-server": "^1.16.2"
  },
  "babel": {
    "presets": [
      "es2015",
      "react"
    ]
  }
}
您提供的是
/static
，而不是
/bundle
。它们是根目录中两个独立的文件夹。解决此问题的一种方法是将包输出到您提供服务的
/static
文件夹中：

// webpack.config.js
var OUTPUT = path.resolve(__dirname, 'static/bundle');
然后，您应该能够像这样加载
bundle.js
：

<script src="/bundle/bundle.js"></script>
您是否尝试设置默认路线？像这个app.get（'/'，function（req，res）{res.sendfile（'./statics/index.html'）；}）@如果您只想提供静态文件，则无需路由。 
<script src="/bundle/bundle.js"></script>