React环境搭建总结

React搭建环境总结

必要组件

名称	简介
webpack	打包工具
插件	–
html-webpack-plugin	可以自动生成html文件, 或加载生成的bundles
extract-text-webpack-plugin	单独打包样式文件
加载器	–
css-loader	解析css文件
file-loader	解析文件,返回其公共地址
url-loader	把文件解析为 base64 编码
html-withimg-loader	打包html中引用的图片, html中直接使用img标签src加载图片的话，因为没有被依赖，图片将不会被打包
转码工具	Babel 入门教程
babel-preset-react	React转码规则
babel-preset-es2015	ES2015转码规则
功能组件	–
react	react组件
react-dom	react基本组件之一
react-redux	react 的状态管理组件 (react 和 redux 是两个不同的产品)
antd	蚂蚁维护的React UI组件库
antd-mobile-rn	蚂蚁RN UI 组件
antd-mobile	蚂蚁维护的React 移动端组件
prop-types	类型验证
react-router-dom	路由组件

webpack

配置结构

    module.exports = {
        entry: ,// 项目的入口文件
        output: { // 打包后的输出路径
            filename:  ,// 打包后的文件名
            path:  // 打包文件路径
        },
        module: { // 其他模块组件
            rules: [{ // 模块的规则配置
                test:  ,// 匹配文件名
                use:  ,// 执行插件名
                include: ,// 匹配指定文件夹下的文件
                exclude: // 排除文件名
            },{
                test: ,
                use: {
                    loader: ,// 执行插件名
                    options: { // 关于插件的详细配置

                    }
                }
            }]
        },
        plugins: [ // 插件
        ],
        mode: '' ,// 开发或是生产  development production
        devServer: { // 服务器配置
        }
    }