webpack+react+antd项目编写过程中遇到的问题

一. webpack配置项目自动编译，页面自动刷新

var path = require("path");
var webpack = require("webpack");
var CSS_PATH = path.resolve(__dirname, 'css');
var UglifyJSPlugin = require('uglifyjs-webpack-plugin');
var HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
....

plugins: [
new webpack.HotModuleReplacementPlugin(),//热加载插件
//单单使用hmr，当我们修改index.html的时候其实这个页面并不会自动刷新。这里我理解为，
// 我们的入口文件index.js里面导入的是test.scss所以这个文件被webpack监听了，
// 然而html模板文件并没有相关导入，因此还需要映入HtmlWebpackPlugin插件
//参考 http://www.jianshu.com/p/9600116437b0 new HtmlWebpackPlugin({template: './index.html'}),

//This ensures that no assets are emitted that include errors.
new webpack.NoEmitOnErrorsPlugin(),
new UglifyJSPlugin(),
//By separating common modules from bundles,
// the resulting chunked file can be loaded once initially,
// and stored in cache for later use
new webpack.optimize.CommonsChunkPlugin({
name:"vendors",
filename:"vendors.js"
})
]
...
};

参考文章：

http://www.jianshu.com/p/9600116437b0

二. react支持箭头函数以及antd按需引入

react支持箭头函数：

react支持箭头函数 需要安装四个组件

npm install –save-dev babel-preset-es2015

npm install –save-dev babel-preset-react

npm install –save-dev babel-preset-stage-0

npm install –save-dev babel-plugin-transform-class-properties

并在webpack.config.js中做以下配置

options:{
presets:['react','es2015',"stage-0"],
plugins: [['import', options],["transform-class-properties"]]
}

参考文章：http://blog.csdn.net/moxuelang/article/details/72863540

antd按需引入：

通过使用 babel-plugin-import插件引入antd 可以仅加载使用到的组件

通过下载babel-plugin-import,以及

plugins: [['import', options],]

配置实现

参考文章：https://ant.design/docs/react/introduce-cn#示例

module.exports = {
...
module:{
rules:[
{
test:/\.js?$/,
exclude:/node_modules/,
loader:'babel-loader',
options:{
presets:['react','es2015',"stage-0"],
plugins: [['import', options],["transform-class-properties"]]
}
},
{
test:/\.less$/,
use:[
'style-loader'
,'css-loader'
,'less-loader'
]
},
{ test: /\.css$/, loader: "style-loader!css-loader" },
//file-loader
{ test: /\.eot(\?v=\d+\.\d+\.\d+)?$/, loader: 'file-loader' },
//url-loader 在文件小于limit时，返回url;大于limit时，类似file-loader，直接返回文件
{ test: /\.(woff|woff2)$/, loader: 'url-loader?prefix=font/&limit=5000' },
{ test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/, loader: 'url-loader?limit=10000&mimetype=application/octet-stream' },
{ test: /\.svg(\?v=\d+\.\d+\.\d+)?$/, loader: 'url-loader?limit=10000&mimetype=image/svg+xml' }
]
}
};    

三.React State

使用state时注意：

(1)绝对不要 直接改变 this.state ，因为之后调用 setState() 可能会替换掉你做的改变。把 this.state 当做是不可变的。

若直接对state进行了修改，state是引用，store内部的state同样也就变了，这样导致React-Redux认为dispatch前后state没有改变，就不会重新渲染UI，实际state已经改变。

(2)setState() 不会立刻改变 this.state ，而是创建一个即将处理的 state 转变。在调用该方法之后访问 this.state 可能会返回现有的值。

对 setState 的调用没有任何同步性的保证，并且调用可能会为了性能收益批量执行。

(3)setState() 将总是触发一次重绘，除非在 shouldComponentUpdate() 中实现了条件渲染逻辑。如果可变对象被使用了，但又不能在 shouldComponentUpdate() 中实现这种逻辑，仅在新 state 和之前的 state 存在差异的时候调用 setState() 可以避免不必要的重新渲染。

参考文章：

http://www.cnblogs.com/little-ab/articles/6958852.html