## 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>
)
}
}
~~~
现在图片也能导入了。
