Node 在集成 React 应用程序时不会渲染静态文件。为什么会发生这种情况，应该做些什么来解决这个问题？答案

【问题标题】：Node does not render static files when integrating React app. Why is this happening, what should be done to fix this?Node 在集成 React 应用程序时不会渲染静态文件。为什么会发生这种情况，应该做些什么来解决这个问题？
【发布时间】：2018-03-24 08:25:04
【问题描述】：

我是 React 和 Webpack、Node 和所有东西的初学者。我的目标是使用 React + Redux + Falcor + Node 创建一些非常简单的全栈应用程序。 K.Przeorski 有一本书（实际上它是构建此应用程序的教程，因此我正在关注它）。对我来说，最难的是 Webpack conf 部分。那里有一个使用 webpack 1.1 的示例。但我尝试使用 Webpack 4 来管理它。我的 webpack.config.js 看起来像这样

const path = require('path');
module.exports = {
  entry: ["babel-polyfill", path.resolve(__dirname, 'src/app.js')],
  module: {
    rules: [
         {
          test: /\.(js|jsx)$/,
          exclude: /node_modules/,
          use: ['babel-loader']
         }
   ]
  },
  resolve: {
    extensions: ['*', '.js', '.jsx']
  },
  output: {
    path: path.join(__dirname, "dist"),
    publicPath: '/',
    filename: 'app.js'
 },
 devServer: {
   inline: true,
   port: 3000,
   contentBase: './dist'
 }

};

这里是来自 package.json 的“sripts”

 "scripts": {
   "dev": "webpack-dev-server --mode development --open",
   "start:dev": "webpack --mode development && node server",
   "webpack": "webpack --config ./webpack.config.js",
   "build": "webpack --mode production",
   "test": "echo \"Error: no test specified\" && exit 1"
 }

当我运行我的应用程序时没有发生错误，捆绑文件 app.js 已构建并位于正确的 dist 文件夹中。但是当 Node 服务器打开并正在侦听时，我的浏览器中存在 On React。我读的这本书是这样的

"start": "npm run webpack; node server"

但这恰好在 Webpack4 中无效，据我了解 webpack4 的教程和文档 - 在像我这样的简单情况下，不需要配置，默认值应该没问题。这之间有严重的区别吗

webpack --mode development && node server

还有这个？

webpack --mode development ; node server

最新显示语法错误。

当服务器启动并且 react 应用出现在浏览器中时，应用应该会通过 falcors API 请求从服务器获取一些数据。我的情况没有提出要求？实际上我的浏览器没有反应。 hre 是我 server.js 的一部分

  const model = new falcor.Model({ cache: cache });

  app.use('/model.json', falcorExpress.dataSourceRoute( (req, res) => { 
    console.log("REQESTING MODEL");
    return model.asDataSource() 
  } ));

  //app.use(express.static('../dist/app.js')); //<= these were my tryouts :(
  app.use(express.static(path.join(__dirname, "dist")));

    // app.get('*', function response(req, res) {<= these were my tryouts :(
    //   res.sendFile(path.join(__dirname, '../dist/index.html'));
   // });

   app.get('/', (req, res) => {
     Article.find( (err, articlesDocs) => {

     const ourArticles = articlesDocs.map((articleItem) => {
       return `<h2>${articleItem.articleTitle}</h2>
          ${articleItem.articleContent}`;}).join('<br/>');

     res.send(`<h1>Publishing App Initial
            Application!</h1> ${ourArticles}`);    
   });
});

我身边确实没有人可以帮助我解决这个问题，所以请帮助我解决这个问题并了解它应该如何工作。将大大appriciate任何帮助。抱歉说了这么长的故事。

【问题讨论】：

标签： node.js reactjs webpack

【解决方案1】：

您是否在 package.json 中尝试过这个脚本？

watch": "webpack-dev-server --inline --hot"

npm 运行观察

您启动本地开发服务器，然后在单独的终端中启动您的 webpack 开发服务器。然后他们可以通过适当的 localhost:xxxx 互相交谈

这是我的示例项目的 webpack 配置 https://github.com/arn1313/kritter-frontend/blob/master/webpack.config.js

【讨论】：