Question

我有一个非常基本的练习项目 - 我有一些初始内容（一个'...'字符串），我在JS环境加载后，我希望React接管div id =“root并替换js含有反应内容的内容（'hello react'字符串）。

我做了一个npm run dev，并生成了bundle.js和bundle.js.map。然后我做了一个npm开始但是当我预览页面时，只存在JS内容，并且在进一步检查时，甚至没有加载React脚本。尽管文件存在于/ public

中，但我收到了404在bundle.js上加载资源错误的失败

这是我的webpack.config.js：

module.exports = {
  entry: './src/index.js',
  output: {
    path: __dirname + '/public',
    filename: 'bundle.js'
  },
  module: {
    loaders: [    
  {
    test: /\.json$/,
    loader: 'json-loader'
  },
  {
    test: /\.js$/,
    loader: 'babel-loader'
  }
]
  }

};

这是我的.babelrc：

{
  "presets": ["react", "es2015", "stage-2"]
}

这是/src/index.js，其中包含reactdom.render：

import React from 'react';
import ReactDOM from 'react-dom';

ReactDOM.render(
    React.createElement('h2', null, 'Hello React'),
    document.getElementById('root')
);

这是/public/index.ejs：

<%- include('header') -%>

    <div id="root">    
        <%- content -%>
    </div>

<%- include('footer') -%>

最后，这是我在根目录中的基本server.js：

import config from './config';
import apiRouter from './api';

import express from 'express';
const server = express();

server.set('view engine', 'ejs');

server.get('/', (req, res) => {
    res.render('index', {
        content: '...'
    });
});

server.use('/api', apiRouter);
server.use(express.static(__dirname + 'public'));

server.listen(config.port, () => {
  console.log('Express is listening on port ' + config.port);
});

我试着到处寻找答案，但没有运气。任何反馈都非常感谢！谢谢！

Answer 1

解决：这个说法： server.use（express.static（__ dirname +'public'））;

需要

server.use（express.static（ '公共'））;

要发送的bundle.js

NodeJS和React：生成了bundle.js，但是我收到错误404（无法加载资源）

1 个答案: