ReactJS初探（二）

前端项目打算使用ReactJS+Webpack+ant-design来做。

webpack+react+es6的配置

跟着这篇文章入门Webpack，看这篇就够了做一遍，可以配置webpack+react+es6。
常用loader：

• babel-loader: webpack配合babel使用
• babel-preset-env: 解析ES6
• babel-preset-react: 解析JSX
• css-loader: 能够使用类似@import 和 url(...)的方法实现 require()的功能
• style-loader: 将所有的计算后的样式加入页面中（和css-loader二者组合在一起使你能够把样式表嵌入webpack打包后的JS文件中。）
• less-loader: css预处理器
• sass-loader: css预处理器
• postcss-loader: css预处理平台

常用plugins：

• webpack.BannerPlugin：添加版权说明的插件
• HtmlWebpackPlugin：根据模板html生成新的html
• Hot Module Replacement（HMR）：它允许你在修改组件代码后，自动刷新实时预览修改后的效果。（react可以通过react-transform-hmr插件，可以在不对React模块进行额外的配置的前提下让HMR正常工作）
• UglifyJsPlugin：压缩js代码，在生产模式中使用
• ExtractTextPlugin：分离css和js文件
• clean-webpack-plugin：去除build文件中的残余文件

loaders是在打包构建过程中用来处理源文件的（JSX，Scss，Less..），一次处理一个，插件并不直接操作单个文件，它直接对整个构建过程其作用。

antd的配置：

1、安装antd

yarn add antd

2、安装babel-plugin-import

yarn add babel-plugin-import --dev

3、配置babel-plugin-import

//在.babelrc中的plugins中加入
["import", { "libraryName": "antd", "style": true }]

4、在webpack中配置less
安装less-loader和less

yarn add less-loader less --dev

修改webpack.config.js，添加处理less的loader：

{
    test: /\.less$/,
    use: [
        {
            loader: "style-loader" // creates style nodes from JS strings
        },
            {
            loader: "css-loader" // translates CSS into CommonJS
        },
            {
            loader: "less-loader" // compiles Less to CSS
        },
    ]
}

webpack + react + antd + es6配置完成

源码地址：https://github.com/lyxia/reactStartKit