React安装步骤

首先安装全局webpack

cnpm i webpack@3.8.1 -g
//或者 当具体的项目有规定webpack版本的时候安装哪个版本即可
npm i webpack@3.8.1 -g

安装开发依赖的webpack

cnpm i webpack@3.8.1 -D
npm i webpack@3.8.1 -D

安装async 如果项目中没有用到 则不用安装

cnpm i async -S
npm i async -S

没有对应的loader解析报错

You may need an appropriate loader to handle this file type.

安装loader模块

cnpm i node-sass sass-loader less less-loader -D
npm i node-sass sass-loader less less-loader -D
cnpm i css-loader style-loader -D
npm i css-loader style-loader -D

安装source-map 查看打包之前的文件

cnpm i source-map -D
npm i source-map -D

安装解析ES6

cnpm i babel-preset-env -D
npm i babel-preset-env -D
cnpm i babel-loader@7 babel-core@6 -D
npm i babel-loader@7 babel-core@6 -D

安装webpack的全局hot

cnpm i webpack-dev-server@2.9.3 -g
npm i webpack-dev-server@2.9.3 -g

安装webpack的开发依赖hot

cnpm i webpack-dev-server@2.9.3 -D
npm i webpack-dev-server@2.9.3 -D

调用热启动

webpack-dev-server --inline --hot

解决箭头函数等问题

cnpm i babel-preset-stage-0 -D
npm i babel-preset-stage-0 -D
//配置箭头函数需要在.babelrc里面配置"stage-0"

校验prpos

cnpm i prop-types -S
npm i prop-types -S

提供一下基本的pageage.json可根据自己项目需求添加

{
  "name": "my-react",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "webpack-dev-server --inline --hot"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "autoprefixer": "^9.5.1",
    "babel-core": "^6.26.3",
    "babel-loader": "^7.1.5",
    "babel-plugin-import": "^1.11.0",
    "babel-preset-env": "^1.7.0",
    "babel-preset-react": "^6.24.1",
    "babel-preset-stage-0": "^6.24.1",
    "css-loader": "^2.1.1",
    "cssgrace": "^3.0.0",
    "extract-text-webpack-plugin": "^3.0.2",
    "file": "^0.2.2",
    "file-loader": "^3.0.1",
    "html-webpack-plugin": "^3.2.0",
    "less": "^3.9.0",
    "less-loader": "^4.1.0",
    "node-sass": "^4.11.0",
    "open-browser-webpack-plugin": "^0.0.5",
    "postcss-loader": "^3.0.0",
    "postcss-px2rem-exclude": "^0.0.6",
    "sass-loader": "^7.1.0",
    "source-map": "^0.7.3",
    "style-loader": "^0.23.1",
    "url-loader": "^1.1.2",
    "webpack": "^3.8.1",
    "webpack-dev-server": "^2.9.3"
  },
  "dependencies": {
    "antd": "^3.16.5",
    "antd-mobile": "^2.2.11",
    "axios": "^0.18.0",
    "jquery": "^3.4.0",
    "prop-types": "^15.7.2",
    "react": "^16.8.6",
    "react-dom": "^16.8.6",
    "react-router-dom": "^4.3.1"
  }
}

webpack.config.js配置

// webpack 配置文件  


var path = require("path");  // 无需安装  Node 自带模块  
var htmlWebpackPlugin = require("html-webpack-plugin"); // 操作 html  
var openBrowserWebpackPlugin =  require("open-browser-webpack-plugin"); // 自动打开 浏览器 
var extractTextWebpack = require("extract-text-webpack-plugin");   // 抽离样式 

var webpack = require("webpack");

console.log('webpack');
// 文件打包
// js  处理ES6 ES7  demo.jsx 
// png jpg svg iocnfont
// less scss css
// app.vue 单文件组件 

module.exports = {
    entry:["./src/main.js"],   // 入口 

    output:{
        path:path.resolve(__dirname,"dist"),  // resolve 成功的处理方式 
        filename:"js/[name].[hash:8].js", // md5 格式加密 得到 长度 8的 加密字段 阻止浏览器缓存 
        publicPath:"", //   公共路径  上线需要修改 
    },

    devtool:"source-map", // 方便调试 

    module:{   // 对需要打包的模块进行配置

        rules:[
            {
                test:/\.(js|jsx)$/,
                exclude:/node_modules/,
                use:["babel-loader"]
            },
            {
                test:/\.(png|jpg|gif|svg|woff|woff2|eot|ttf)$/,
                use:["url-loader?limit=8192&name=imgs/[hash:8].[name].[ext]"]
            },
            {
                test:/\.(css|scss)/,
                use:extractTextWebpack.extract({
                    fallback:"style-loader",    //  样式 改造创建 node 风格  JS字符串
                    use:[
                        'css-loader',   //    转换 commonJS 规范的模块
                        {
                            loader:"postcss-loader", // css代码结构转换 
                            options:{
                                plugins:function(){
                                    return [
                                        require("cssgrace"),   // css代码美化
                                        require("autoprefixer"), // 自动补全 
                                        require("postcss-px2rem-exclude")(
                                            {
                                                remUnit:100,  // 200px% 100    ==> 2rem 
                                                exclude:/antd-mobile/i,  // 排除 antd-mobile不需要进行 rem 转换 
                                            }
                                        )
                                    ]
                                }
                            }
                        },
                        "sass-loader"
                    ]
                })
            },
            {
                test:/\.(css|less)/,
                use:extractTextWebpack.extract({
                    fallback:"style-loader",    //  样式 改造创建 node 风格  JS字符串
                    use:[
                        'css-loader',   //    转换 commonJS 规范的模块
                        {
                            loader:"postcss-loader", // css代码结构转换 
                            options:{
                                plugins:function(){
                                    return [
                                        require("cssgrace"),   // css代码美化
                                        require("autoprefixer"), // 自动补全 
                                        require("postcss-px2rem-exclude")(
                                            {
                                                remUnit:100,  // 200px   % 100    ==> 2rem 
                                                exclude:/antd-mobile/i,  // 排除 antd-mobile不需要进行 rem 转换 
                                            }
                                        )
                                    ]
                                }
                            }
                        },
                        "less-loader"
                    ]
                })
            }
        ]

    },

    // 配置服务器
    devServer:{
        contentBase:path.join(__dirname,"dist"), // 插件起服务作用于 dist 
        compress:true,
        hot:true,
        inline:true,
        // open:true,
        host:"0.0.0.0",
        port:8000,
        publicPath:"",
        proxy:{   // 代理 

        }
    },

    plugins:[  // 使用插件 
        new htmlWebpackPlugin({
            template:"./public/index.html",
            inject:true   // 注入  自动引入 js 和 css 
        }),

        new openBrowserWebpackPlugin({url:"http://localhost:8000"}),

        new extractTextWebpack({
            filename:"css/app.[hash:8].css",
            allChunks:true,   // 打包所有样式数据
            disable:false  // 样式抽离
        }),

        // 自动引入 
        new webpack.ProvidePlugin({
            React:"React",
            Component: ['react', 'Component'],
            $:"jQuery"
        })
    ]


}

.babelrc文件

{
    "presets": [
        "env",
        "react",
        "stage-0"
    ],
    "plugins": [
        ["import", { "libraryName": "antd-mobile", "style": "css" }] 
        
    ]
}