Question

我是ReactJS和Node.js的新手，我肯定会陷入困境。我的问题是我无法在index.html文件中渲染我的简单React组件。当我在终端中写webpack时，它会输出bundle.js个文件。然后，当我使用npm start脚本启动webpack-dev-server时，它会运行，我可以转到localhost:3000，它会输出： Image of output。这意味着它不输出<div id="app"></div>。

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

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

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

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

的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>

App.jsx

var React = require('react');
var ReactDOM = require('react-dom');

var Test = React.createClass({
  render: function() {
    return <h1>Hello world</h1>;
  }
});

ReactDOM.render(<Test />, document.getElementById('app'));

webpack.config.js

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;

的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"
    ]
  }
}

Answer 1

您提供/static但不提供/bundle。它们是根目录中的两个单独文件夹。解决此问题的一种方法是将您的捆绑包输出到您提供的/static文件夹中：

// webpack.config.js
var OUTPUT = path.resolve(__dirname, 'static/bundle');

然后你应该可以加载bundle.js这样的内容：

<script src="/bundle/bundle.js"></script>

React.js with Express：在使用Express作为服务器时，在客户端渲染一个简单的组件？

1 个答案: