ExpressJS + Webpack + react-router v4

Question

我正在尝试设置自己的样板来创建反应应用程序，只是为了了解幕后发生的事情。

我被困在使用 Webpack/Express/react-router v4 进行服务器渲染。就是不知道怎么解决。

我的express.js 文件如下所示：

const express = require('express');
const morgan = require('morgan');
const path = require('path');
const React = require('react');
const ReactDOMServer = require('react-dom/server');
const StaticRouter = require('react-router').StaticRouter;
const App = require('./src/app');

const app = express();

// Views
app.set('view engine', 'ejs');
app.set('views', path.resolve(__dirname, 'src', 'templates'))

// Middlewares
app.use(morgan(':method :url :status :res[content-length] - :response-time ms'));
app.use(express.static(path.resolve(__dirname, 'dist')));

// Paths
app.get('*', (req, res) => {
  const context = {}
  const html = ReactDOMServer.renderToString(
    <StaticRouter
      location={req.url}
      context={context}
    >
      <App/>
    </StaticRouter>
  )
  res.render('index', {reactOutput: html});
  // Then in my index.ejs put a <%- reactOutput %> 
});

const port = 8000;
app.listen(port, () => {
  console.log('Listening on port', port);
})

接下来的步骤是什么？我在想什么： 1. 在webpack.config.js 中为express.js 定义新条目 2. 启动Webpack使用node express.bundle.js创建的express.bundle.js

但是当我尝试运行webpack -p 时，我得到了错误：

ERROR in ./node_modules/express/lib/request.js
Module not found: Error: Can't resolve 'net' in '/Users/NYC/Desktop/JavaScript/Boilerplate/client/node_modules/express/lib'

ERROR in ./node_modules/express/lib/view.js
Module not found: Error: Can't resolve 'fs' in '/Users/NYC/Desktop/JavaScript/Boilerplate/client/node_modules/express/lib'

ERROR in ./node_modules/send/index.js
Module not found: Error: Can't resolve 'fs' in '/Users/NYC/Desktop/JavaScript/Boilerplate/client/node_modules/send'

ERROR in ./node_modules/etag/index.js
Module not found: Error: Can't resolve 'fs' in '/Users/NYC/Desktop/JavaScript/Boilerplate/client/node_modules/etag'

ERROR in ./node_modules/destroy/index.js
Module not found: Error: Can't resolve 'fs' in '/Users/NYC/Desktop/JavaScript/Boilerplate/client/node_modules/destroy'

ERROR in ./node_modules/mime/mime.js
Module not found: Error: Can't resolve 'fs' in '/Users/NYC/Desktop/JavaScript/Boilerplate/client/node_modules/mime'

Answer 1

您应该将target: 'node' 添加到您的 webpack 配置文件中。

欲了解更多信息，您可以阅读https://webpack.js.org/concepts/targets/