## combinReducers優化
`redux`提供了一個`combineReducers`函數來合并`reducer`，不用我們自己合并哦。寫起來簡單，但是意思和我們自己寫的`combinReducers`也是一樣的。
`src/redux/reducers.js`
~~~
// 引入redux的combineReducers
import { combineReducers } from 'redux'
import counter from 'reducers/counter'
import userInfo from 'reducers/userInfo'
// 刪除原來定義的combineReducers
export default combineReducers({ counter, userInfo })
~~~
## devtool優化
如果我們現在在代碼里面有一個`bug`，但是我們從`devtool`工具里并看不出來是哪里錯了，瀏覽器報錯只報在`build.js`第幾行。
這讓我們分析錯誤無從下手，看[這里](https://doc.webpack-china.org/configuration/devtool)。
我們需要添加`webpack`配置`devtool`！
`src/webpack.dev.config.js`增加：
~~~
devtool: 'inline-source-map'
~~~
這次看錯誤信息是不是提示的很詳細了？
同時，我們在srouce里面能看到我們寫的代碼，也能打斷點調試哦~
## 編譯css
`npm install css-loader style-loader --save-dev`
`css-loader`使你能夠使用類似`@import` 和 `url(...)`的方法實現 `require()`的功能；
`style-loader`將所有的計算后的樣式加入頁面中； 二者組合在一起使你能夠把樣式表嵌入`webpack`打包后的JS文件中。
`webpack.dev.config.js` `rules`增加：
~~~
{
test: /\.css$/,
use: ['style-loader', 'css-loader']
}
~~~
我們用`Page`頁面來測試下，創建`src/pages/Page/Page.css`：
~~~
.page-box {
border: 1px solid red;
}
~~~
修改`src/pages/Page/Page.js`：
~~~
import React, { Component } from 'react'
import './Page.css'
export default class Page extends Component {
render() {
return <h1 className="page-box">This is Page</h1>
}
}
~~~
可以看效果了。
## 編譯圖片
`npm install --save-dev url-loader file-loader`
`webpack.dev.config.js` `rules`增加：
~~~
{
test: /\.(png|jpg|gif)$/,
use: [{
loader: 'url-loader',
options: {
limit: 8192
}
}]
}
~~~
`options` `limit` `8192`意思是，小于等于8K的圖片會被轉成`base64`編碼，直接插入HTML中，減少`HTTP`請求。
繼續用`Page`測試，創建一個images文件夾，放一張圖片，并引入圖片，修改`src/pages/Page/Page.js`：
~~~
import React, { Component } from 'react'
import './Page.css'
import image from './images/img.jpg'
export default class Page extends Component {
render() {
return (
<h1 className="page-box">
This is Page
<img src={image} />
</h1>
)
}
}
~~~
現在圖片也能導入了。
