目的
這問題首先我們要給出為什么使用服務(wù)端渲染语卤，主要基于以下三點(diǎn)
1.利于SEO：React服務(wù)器渲染的方案使你的頁面在一開始就有一個(gè)HTML DOM結(jié)構(gòu)集绰，方便Google等搜索引擎的爬蟲能爬到網(wǎng)頁的內(nèi)容。
2.提高首屏渲染的速度：服務(wù)器直接返回一個(gè)填滿數(shù)據(jù)的HTML爹橱，而不是在請求了HTML后還需要異步請求首屏數(shù)據(jù)
3.前后端都共用代碼呆馁，提供開發(fā)效率
其中提到了共用代碼，即前后端共用一套拓哟，如下圖，這一具體實(shí)現(xiàn)就需要使用同構(gòu)
為什么要用webpack-isomorphic-tools
webpack可以將任意資源打包留美，那是在客戶端彰檬，但是當(dāng)其運(yùn)行在服務(wù)端時(shí)伸刃，對于非js文件是無法正常import的谎砾，這里我的處理辦法是webpack-isomorphic-tools
需要做什么
我們接著上一篇加了路由的基礎(chǔ)上看看改了什么逢倍，上面為修改的，下面為新增的
1.package.json
可以看出景图，安裝了依賴包较雕，主要是webpack-isomorphic-tools，另外的包是用來加載scss的挚币，可忽略
2.src/server/index.js
require('babel-register')
require('babel-polyfill')
const Webpack_isomorphic_tools = require('webpack-isomorphic-tools')
global.webpack_isomorphic_tools = new Webpack_isomorphic_tools(require('../webpack/webpack-isomorphic-tools-configuration'))
.server('./')
.then(() => {
require('./app');
})
頭兩句用來是app.js支持es6的語法亮蒋，主要看第三行開始的代碼，可以看出引入了同構(gòu)的包妆毕，然后使用構(gòu)造函數(shù)來新建了一個(gè)對象慎玖，這個(gè)構(gòu)造函數(shù)加載了一個(gè)文件（下面會提到），然后調(diào)用了server,它引用了一個(gè)路徑笛粘，這個(gè)路徑用來生成配置文件中的一些文件的路徑趁怔，此處是用于生成webpack-assets.json，然后去引用了app.js薪前，這一段照抄即可
3.src/server/app.js
這個(gè)文件比較龐大润努，其實(shí)它就是router的那一部分內(nèi)容，就不貼出代碼了
4.src/webpack/webpack-isomorphic-tools-configuration.js
這是同構(gòu)的配置文件示括，即核心文件铺浇，一般情況下不需要修改，直接用即可垛膝，只提其中的一句
webpack_assets_file_path: __dirname + '/webpack-assets.json',
這用來配置生成的對照文件文件
5.src/webpack/webpack-assets.json
這個(gè)文件就是上面說的對照文件鳍侣，我們看看它長什么樣
{
"javascript": {
"main": "/static/bundle.js"
},
"styles": {},
"assets": {
"./src/containers/About/main.scss": {
"test": "test_1qbej",
"_style": ".test_1qbej {\n color: red; }\n"
}
}
}
很明顯，它就是生成的一些映射關(guān)系吼拥，我在搭環(huán)境時(shí)拱她，遇到了一個(gè)坑，假如不手動去生成這個(gè)文件扔罪，而是由同構(gòu)自己去生成秉沼，那么會陷入死循環(huán)，一直如下
[webpack-isomorphic-tools] (waiting for the first Webpack build to finish)
[webpack-isomorphic-tools] (waiting for the first Webpack build to finish)
[webpack-isomorphic-tools] (waiting for the first Webpack build to finish)
[webpack-isomorphic-tools] (waiting for the first Webpack build to finish)
[webpack-isomorphic-tools] (waiting for the first Webpack build to finish)
[webpack-isomorphic-tools] (waiting for the first Webpack build to finish)
[webpack-isomorphic-tools] (waiting for the first Webpack build to finish)
[webpack-isomorphic-tools] (waiting for the first Webpack build to finish)
有遇到這個(gè)情況的矿酵，還望多多指教
6.src/webpack/webpack.config.js
直接上代碼吧
var webpack = require('webpack')
var path = require('path')
const Webpack_isomorphic_tools_plugin = require('webpack-isomorphic-tools/plugin');
const webpack_isomorphic_tools_plugin =
new Webpack_isomorphic_tools_plugin(require('./webpack-isomorphic-tools-configuration')).development()
module.exports = {
devtool: 'inline-source-map',
entry: [
'webpack-hot-middleware/client?path=http://localhost:3001/__webpack_hmr',
'./src/index.js'
],
output: {
filename: 'bundle.js',
path: path.join(__dirname, 'dist'),
publicPath: '/static/'
},
module: {
loaders: [{
test: /\.js$/,
exclude: /(node_modules|bower_components)/,
loader: ['babel-loader']
}, {
test: /\.scss$/,
loader: [
'style-loader',
'css-loader?modules&importLoaders=2&sourceMap&localIdentName=[local]_[hash:base64:5]',
'sass-loader?sourceMap'
].join('!')
}, {
test: webpack_isomorphic_tools_plugin.regular_expression('images'),
loader: 'url-loader?limit=10240'
}]
},
plugins: [
webpack_isomorphic_tools_plugin,
new webpack.optimize.OccurrenceOrderPlugin(),
new webpack.HotModuleReplacementPlugin(),
new webpack.NoEmitOnErrorsPlugin()
]
}
就加了同構(gòu)工具的引用唬复，已經(jīng)配置，還有scss文件的loader全肮，比較簡單敞咧，就不贅述了。
好了辜腺，基本上react腳手架的東西差不多就這么多了休建，還剩的應(yīng)該就是具體的開發(fā)了乍恐，如生命周期，Immutable之類的测砂，有時(shí)間我再繼續(xù)寫茵烈。
