Universal-webpack服務端渲染

時間 2019-12-05

標籤 universal webpack 服務渲染简体版

原文原文鏈接

Universal-webpack

幫助搭建用於同構，即同時能夠在客戶端和服務端使用的Webpack。javascript

Demo

個人Demo：universal-webpack + koa + react + webpack。
官方Democss

Webpack 2

目前僅支持Webpack2.html

npm install webpack --save
npm install extract-text-webpack-plugin --save

使用

以往咱們會建立一個標準的 webpack.config.js 。
此時，咱們須要建立另外兩個配置文件：webpack.config.client.babel.js 和 webpack.config.client.babel.js。以下：java

webpack.config.client.babel.js

import { client } from 'universal-webpack/config'
import settings from './universal-webpack-settings'
import configuration from './webpack.config'

export default client(configuration, settings)

代替webpack.config.js來完成客戶端的打包。node

webpack.config.server.babel.js

import { server } from 'universal-webpack/config'
import settings from './universal-webpack-settings'
import configuration from './webpack.config'

export default server(configuration, settings)

universal-webpack-settings.json

{
    "server":
    {
        "input": "./source/server.js",
        "output": "./build/server/server.js"
    }
}

output所對應的文件由input對應的文件使用Webpack根據webpack.config.server.babel.js中的配置生成。react

server.js

服務器啓動，官方Demo以下：webpack

// express.js
import path from 'path'
import http from 'http'
import express from 'express'
import http_proxy from 'http-proxy'

// react-router
import routes from '../client/routes.js'

// Redux
import store from '../client/store.js'

// The server code must export a function
// (`parameters` may contain some miscellaneous library-specific stuff)
export default function(parameters)
{
    // Create HTTP server
    const app = new express()
    const server = new http.Server(app)

    // Serve static files
    app.use(express.static(path.join(__dirname, '..', 'build/assets')))

    // Proxy API calls to API server
    const proxy = http_proxy.createProxyServer({ target: 'http://localhost:xxxx' })
    app.use('/api', (req, res) => proxy.web(req, res))

    // React application rendering
    app.use((req, res) =>
    {
        // Match current URL to the corresponding React page
        // (can use `react-router`, `redux-router`, `react-router-redux`, etc)
        react_router_match_url(routes, req.originalUrl).then((error, result) =>
        {
            if (error)
            {
                res.status(500)
                return res.send('Server error')
            }

            // Render React page

            const page = redux.provide(result, store)

            res.status(200)
            res.send('<!doctype html>' + '\n' + ReactDOM.renderToString(<Html>{page}</Html>))
        })
    })

    // Start the HTTP server
    server.listen()
}

但這個文件不是真正的入口文件，須要另外一個文件，咱們須要另外一個文件來啓動服務。git

start-server.js

var startServer = require('universal-webpack/server')
var settings = require('../universal-webpack-settings')
// `configuration.context` and `configuration.output.path` are used
var configuration = require('../webpack.config')

startServer(configuration, settings)

調用這個入口文件，實質上是調用了經過Webpack打包以後的server.js。github

開發環境的啓動命令大體以下：web

webpack-dev-server --hot --inline --config "./webpack.config.client.babel.js" --port XXXX --colors --display-error-details
//啓動一個webpack-dev-server，真正的Development Server會從這裏請求一些靜態文件(好比：boundle.js)。
//Universal-webpack不會再服務端釋聽任何資源，全部資源都在客戶端）。
webpack --watch --config "./webpack.config.server.babel.js" --colors --display-error-details
//打包服務端代碼
nodemon "./source/start-server" --watch "./build/server"
啓動服務器

生產環境的啓動命令大體以下：

webpack --config "./webpack.config.client.babel.js" --colors --display-error-details
webpack --config "./webpack.config.server.babel.js" --colors --display-error-details
node "./source/start-server"

Chunks

返回webpack最終所輸出的文件信息：

build/webpack-chunks.json

{
    javascript:
    {
        main: `/assets/main.785f110e7775ec8322cf.js`
    },

    styles:
    {
        main: `/assets/main.785f110e7775ec8322cf.css`
    }
}

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。