如何在服務器端渲染圖像？

Question

如何使用 React 在服務器端渲染圖像和 css 文件？

這是我的服務器代碼：

const express = require('express')
const router = express.Router()
const ReactDOM = require('react-dom/server');

import Master from '../../../client/Master'

router.get('/', (req, res) => {
    res.render('test.html', {reactOutput: ReactDOM.renderToString(<Master/>)});
});

主組件：

import React from "react";
import Intro from "./pages/Intro";
import Footer from "./components/Footer";
import Header from "./components/Header";

export default class Master extends React.Component {
    constructor() {
        super();
        this.state = {appStatus: 'INTRO'}
    }

    render() {
        let layout;
        switch (this.state.appStatus) {
            case "INTRO":
                layout = <Intro/>;
        }

        return (
            <div>
                <Header/>
                {layout}
                <Footer/>
            </div>
        )
    }
}

但是當我用 babel 運行服務器時，我得到了這個錯誤：

/assets/img/logo.png：意外字符“？” (1:0)

這是試圖要求徽標的 Header 組件。

import React from "react";
**import logo  from '../../assets/img/logo.png';**

export default class Header extends React.Component {
    constructor() {
        super();
    }

    render() {
        return (
            <nav class="navbar navbar-default">
                <div class="container-fluid">
                    <div class="navbar-header">
                        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                            <span class="sr-only">Toggle navigation</span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                        </button>
                        <a class="navbar-brand" href="#">**<img width="250" src={logo} alt=""/></a>**
                    </div>


                </div>
            </nav>
        );
    }
}

但對於客戶端，它可以與 webpack 一起正常工作。

Answer 1

您需要為服務器使用單獨的webpack配置

1. 安裝此模塊以排除node_modules：

    npm install --save webpack-node-externals 

2. 為您的服務器創建一個單獨的webpack配置：

    module.exports = { const path = require('path') const nodeExternals = require('webpack-node-externals') context: path.resolve(__dirname, 'directory of your server file'), entry: ['./filename of your server file'], output: { path: path.join(__dirname, 'directory of your bundled file'), filename: 'filename of your bundled file' }, target: 'node', externals: [nodeExternals()], module: { rules: [ { test: /\\.(jpe?g|png|gif|svg|ico)$/i, use: 'url-loader?limit=8192' } ] } } 

3. 這是一個示例服務器webpack.config.js：

    module.exports = { const path = require('path') const nodeExternals = require('webpack-node-externals') context: path.resolve(__dirname, 'src'), entry: ['./index.js'], output: { path: path.join(__dirname, 'dist'), filename: 'bundle.js' }, target: 'node', externals: [nodeExternals()], module: { rules: [ { test: /\\.(jpe?g|png|gif|svg|ico)$/i, use: 'url-loader?limit=8192' } ] } } 

4. 如果使用上面的webpack.config.js示例，請運行webpack然后運行編譯的服務器文件：

    webpack node dist/bundle.js 

Answer 2

上面的答案要么是舊的，要么有幾個問題。 這是 webpack 5 的更新答案。這會從各自的文件夾中導入 fonts 和圖像。

const path = require("path");

module.exports = {
  target: "node",
  entry: {
    server: "./server.js"
  },
  output: {
    path: path.join(__dirname),
    filename: "[name]-packed.js",
  },
  module: {
    rules: [
      {
        test: /\.(jpe?g|png|gif|svg|ico)$/i,
        use: [
          {
            loader: 'file-loader',
            options: {
              name: '[name].[ext]',
              outputPath: 'img/'
            }
          }
        ]
      },
      {
                test: /\.(js|jsx)$/,
                exclude: /node_modules/,
                loader: "babel-loader"
            },
      {
        test: /\.(woff(2)?|ttf|eot|svg)(\?v=\d+\.\d+\.\d+)?$/,
        use: [
          {
            loader: 'file-loader',
            options: {
              name: '[name].[ext]',
              outputPath: 'fonts/'
            }
          }
        ]
      }
    ],
  },
};