現在項目已經有了，但是要把它放到生產環境中還是有些事情要做，在這最后一節，來把它們一一搞定。

這一節其實更多是關于webpack的內容。不過要想把react用得很爽，我們需要一個現代化的構建工具。在前面幾節webpack都在默默地工作著。react全都是關于組件的，組件意味著模塊化，webpack讓前端模塊化得淋漓盡致。我們的目標是要把react用起來，并且是很舒坦的用起來，所以我覺得這節并沒跑題，而且很重要。

打包部署文件

我們的源代碼是沒法直接跑起來的。ES6語法大部分瀏覽器還不完全支持，有些瀏覽器完全不支持。而less、sass這些樣式框架就更不用說了。另外對這些代碼最好進行壓縮，以獲得更快的訪問速度。所以在正式發布這些代碼前必須先要編譯打包。webpack可是干這個的以大能手，看名字就知道了。那要怎么打包呢？

// 終端執行：
npm run dist

搞定。
現在我們的項目目錄里多出了一個名為dist的文件夾，這里面就是要部署的全部內容。由于generator-react-webpack-redux已經為我們做好了webpack的一些配置，所以我們看到打包好的文件已經經過了壓縮混淆。

服務器設置

如果我們在使用react-router的時候選擇了瀏覽器歷史管理方式，那么服務器必須要能夠正確處理各種路徑。實際上我們的應用只有一個頁面文件，在訪問各種有效路徑的時候，服務都應該返回那唯一的頁面。在開發過程中，我們通過npm start指令啟動了一個node服務，它已經處理好了這些路由。但是在實際生產環境中，我們往往會使用一個靜態服務器，比如nginx或apache。如果把剛才打包好的dist目錄扔給nginx，你會發現只有根路徑可以訪問，通過點擊跳轉到各個路由沒問題（也就是通過react-router控制的跳轉），要直接在瀏覽器的地址欄輸入"yourSiteName.com/news"這樣的自路徑就404了。現在以nginx為例來配置好適合我們應用的路由。
我們所需配置的內容都在http > server節點下。
首先考慮對諸如/news這樣的路徑并不存在對應的頁面文件，所以對于未知路徑要都給打發到根路徑下：

location / { 
      root /Users/someone/my-project/dist; 
      index index.html index.htm; 
      try_files $uri /index.html;
}

這樣，我們在地址欄輸入"yourSiteName.com/news"以后，nginx沒有找到news.html，它就嘗試找index.html，inedex.html打開后，我們的代碼就生效了，react-router看到地址欄里的路徑是/news，它就會在一開始去匹配/news，并改變狀態。
至于腳本、圖片這些靜態文件我們不用處理，因為nginx按照路徑就可以直接找到這些文件。另外就是把后端服務的接口處理好，nginx代理tomcat這些后端服務是很常見的配置，只要注意在路徑上服務和頁面要能明顯區分開，比如所有的后端服務接口都有.do后綴，這樣配置就行了：

location ~*.do$ { 
     proxy_pass http://192.168.1.1:8088;
}

分離樣式文件

盡管在示例代碼里我把樣式都寫成內聯形式的了，但我還是建議寫單獨的樣式文件。前面也提到過，樣式文件可以直接在js代碼中引入，這對于構造獨立的模塊非常方便。但是在默認狀態下，我們會發現導出的文件沒有css文件，實際上導入的樣式是在代碼運行時加到頁面上的style標簽里的。這樣頁面渲染性能不太好，而且會增大js文件的體積，最好還是把它拿出來。萬能的npm里有專干這個的webpack插件，來把它裝上先：

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

然后要修改一下webpack的配置文件。由于這個插件只有在打包的時候才會用到，所以我們只改cfg/dist.js文件。引入這個插件，然后在plugins數組里添加相應的項目：

let ExtractTextPlugin = require('extract-text-webpack-plugin');
let config = _.merge({ 
   plugins: [ 
         new ExtractTextPlugin('app.css') 
   ]
});

還要改一下loader。原本loader是寫在cfg/base.js里面的，但是在開發環境中我們用不到這個插件，而如果使用了插件提供的loader就會報錯，所以我們在dist.js里面把config.module.loaders數組覆蓋。假如我們的項目里用到了css和less兩種樣式文件，就在config.module.loaders.push這一段前面添加如下代碼：

config.module.loaders = [
     { 
        test: /\.css$/, 
        loader: ExtractTextPlugin.extract('style-loader', 'css-loader') 
     },
     { 
          test: /\.less/, 
          loader: ExtractTextPlugin.extract('style-loader', 'css-loader!less-loader')
    },
    { 
          test: /\.(png|jpg|gif|woff|woff2)$/,
          loader: 'url-loader?limit=8192'
    }
]

這里除了兩種樣式文件的loader以外，還把base里的一個非樣式的loader給帶過來了，別把它忽略了，它很有用，一會兒再說。
現在再運行npm run dist，可以看到asset文件夾里多了一個app.css文件。別忘了在index.html文件里面引入新生成的樣式文件。

加載圖片

webpack讓我們可以在js代碼中引入圖片并使用，引入圖片只需一個簡單的require語句：

let logo = require('../images/logo.png');

然后可以像使用其它變量一樣來使用這個圖片：

render(){ 
      return <img src={logo}>
}

你可能覺得，一個圖片直接用它的路徑就行了，何必要裝模作樣的引入呢？我認為有這么做兩個好處：
首先還是模塊化。如果一個組件需要用到圖片，在這個組件文件內引入圖片，圖片會在run dist時一并打包，不用擔心圖片丟失。
其次很多服務器會對圖片進行CDN緩存，如果你替換了一張圖片，很可能它在一段時間內不會生效，而通過webpack引入的圖片是一內聯base64或者重命名為唯一hash文件名的形式打包的，這樣就不會出現惱人的緩存情況。
不只是在js中引入圖片會被webpack處理，css里的圖片也會被同樣的方式處理。
如果你已經在你的項目里加上了幾個小圖片，你可能會發現打包后并沒有看到圖片或者圖片比原來少，這是因為有一個臨界值，低于它的圖片會直接轉成base64寫在導出的js文件里。這樣也好也不好，好處是圖片在一開始就被載入，后面不會出現圖片延后載入的效果，用戶體驗很好，不好就是base64比原圖片大小更大，如果圖片比較多，導出的js文件就會太大，讓用戶初始等待時間過長。所以我們要權衡利弊設置一個合適的臨界值。前面我們在dist.js配置文件中重寫loaders的時候把base里的一個loader帶了過來，它就是干這個用的，test屬性的正則表達式表明我們想讓webpack處理什么格式的圖片，loader屬性最后的數字就是內聯圖片臨界值，單位是字節。我們把它設置成1K吧：

{ 
      test: /\.(png|jpg|gif|woff|woff2)$/, 
      loader: 'url-loader?limit=1024'
}

多個入口

我們的目標是單頁應用，但是當項目規模比較大的時候整個項目可能會被拆分成多個單頁應用。拆分多個應用的關鍵在于要有多個入口文件。目前我們的項目只有一個入口文件：src/index.js。來看cfg/dist.js文件，里面的config對象中entry屬性的值現在是一個index.js路徑字符串。entry的值也可以是一個對象，這樣就可以聲明多個入口文件，對象的key對應著文件名。比如我們想要增加一個入口文件src/test.js，先搞點很簡單的內容：

import React from 'react';
import { render } from 'react-dom';
render( 
        <div>TEST</div>, 
        document.getElementById('app')
);

把cfg/dist.js中的config.entry改成這樣：

entry: { 
    app: path.join(__dirname, '../src/index'), 
    test: path.join(__dirname, '../src/test')
}

現在明確指定了兩個入口文件，然后還要修改config.output.filename：

config.output.filename = '[name].js'

輸出文件時，name會自動對應成entry中的key。執行npm run dist，現在asset目錄中多出了個test.js。
使用這個文件需要另一個單獨的頁面，如果我們用靜態html頁面的話，要把頁面路徑添加到項目根目錄下的package.json中，在scripts對象中有個copy屬性，加到里面就行了，這樣才能在run dist的時候把它一并拷貝到dist目錄里。
最后，也許你還要修改一下nginx配置，讓test路徑單獨匹配。

分離第三方庫

你可能發現了剛才我們把文件分成多個入口時，新入口文件即使內容非常少，哪怕只渲染了一個div，生成的文件大小還有上百k。里面其實主要都是第三方庫。這太不優雅了，既然這些第三方庫幾乎會被所有的應用重復使用，一定得把他們單拎出來。于是我們需要一個插件：CommonsChunkPlugin。這個插件不用單獨安裝了，它被包含在webpact.optimize里面。我們打算再輸出一個叫commons.js的文件，包含全部第三方庫。在cfg/dist.js的plugins數組里面添加這個插件：

new webpack.optimize.CommonsChunkPlugin('commons', 'commons.js')

然后在entry對象里面再添加一個commons屬性，它的值是一個數組，包含所有我們想要拎出來的庫：

entry: { 
    app: path.join(__dirname, '../src/index'), 
    test: path.join(__dirname, '../src/test'), 
    commons: [ 
        'react', 
        'react-dom', 
        'react-redux', 
        'react-router', 
        'redux', 
        'redux-thunk' 
    ]
}

OK，輸出的文件多了個commons.js，而app.js和test.js比原來小了很多。這回優雅了。別忘了在所有的頁面里都把commons.js引進去。

按需加載

當項目非常大的時候，拆分多個入口文件是一種方案，還有一種方案是按需加載，也就是懶加載或異步加載。我們可以讓用戶真正進入一個路由時才把對應的組件加載進來，要實現這個非常簡單，只需要一個webpack的loader：react-router-loader，先用npm把它安裝上，然后修改src/routs.js文件，比如我們現在想讓登錄頁面懶加載，那就把登錄頁面的路由改成這樣：

<Route path="login" component={require('react-router!./containers/Login')}/>

編譯打包后，又多出了一個1.1.js文件，這就是在進入登錄路由時要加載的文件，也就是單獨的登錄組件。其它的就不用我們管了，代碼會自動處理的。
既然是按需加載，我們一定是希望初始的時候加載的代碼盡量少，盡可能在進入某個路由時才載入相應的全部內容。我們的代碼大致就三類東西：組件、action和reducer。組件很明顯可以是獨立載入的。reducer恐怕沒辦法，因為它需要指導整個倉庫狀態的建立。至于action，我們前面的示例代碼是不獨立的，因為reducer要依賴action文件里面的常量，我們只需要把所有的常量提出到一個公共的文件中，只有組件引用action文件。比如我們新建一個src/constants.js文件，內容是：

// 所有action的常量...
export const INPUT_USERNAME = 'INPUT_USERNAME'
export const INPUT_PASSWORD = 'INPUT_PASSWORD'
export const RECEIVE_NEWS_LIST = 'RECEIVE_NEWS_LIST'
export const SET_KEYWORD = 'SET_KEYWORD'

然后還以login為例，把src/reducers/login.js里面引入常量的目標改為constants.js：

import {INPUT_USERNAME, INPUT_PASSWORD} from '../constants'

src/actions/login.js里也這樣引入常量。run dist后，1.1.js文件就包含了actions/login.js里面的內容。

添加hash后綴

在一個大型且需要頻繁升級的項目中，靜態文件往往需要添加hash后綴，這主要是出于兩個原因：一個是所有版本的靜態文件可以同時存在，而頁面由后端控制，后端根據接口的版本綁定js和css文件，這樣便于升級和回滾。另一個是防止緩存，這和前面圖片重命名為hash值是一個道理。
讓webpack為文件名添加后綴非常簡單，只需要在輸出的文件名上加上[hash]就可以了。比如我們想讓app.js帶上hash后綴，只需要在cfg/dist.js最后一句前面加上一句：

config.output.filename = 'app.[hash].js'
// 或者
config.output.filename = 'app.js?v=[hash]'

而對于插件生成的樣式文件和公共js文件同樣也是在文件名上加上[hash]就行了。
現在關鍵的問題是怎么應用這些有了hash后綴的文件。總不能每打一次包我們就手動改一下index.html把。
webpack的配置文件是js，這就意味著這個配置文件是活的，我們可以很容易把想做的事情通過代碼實現。現在我要在每次打包后把index.html文件引入的js和css文件自動替換成帶hash尾巴的形式，只需添加一個自己寫的插件，其實就是一個函數。在cfg/dist.js里面的plugins數組里添加以下函數：

function() { 
      this.plugin("done", function(stats) { 
          let htmlPath = path.join(__dirname, '../dist/index.html') 
          let htmlText = fs.readFileSync(htmlPath, {encoding:'utf-8'}) 
          let assets = stats.toJson().assetsByChunkName
          Object.keys(assets).forEach((key)=>{ 
                let fileNames = assets[key]; 
                ['js', 'css'].forEach(function(ext){ 
                        htmlText = htmlText.replace(key+'.'+ext,
                            fileNames.find(function(item){ 
                                return new RegExp(key+'\\.\\w+\\.'+ext+'$').test(item) 
                            })) 
                }) 
          }) 
          fs.writeFileSync( htmlPath, htmlText) 
     });
}

很暴力，就是赤裸裸的node操作文件系統。這回dist文件夾中的index.html里引入的腳本和樣式都是帶hash的了。
在很多項目中，我們前端要提供的可能不是一個引用好js和css的html文件，而是一個map文件，里面有靜態文件的版本信息（hash值），這樣后端就能直接把需要的靜態文件掛上。可以自己寫一個跟上面代碼類似的插件輸出一個map文件，也可在萬能的npm找個插件，比如map-json-webpack-plugin。上面那個功能也可以試試replace-webpack-plugin。