React（脚手架）——webpack2

接着上一篇，用webpack编辑react环境，如果你不感兴趣可以跳过这一块，因为很多时候其实你的组长已经给你配好了环境，而且如果不经常使用脑子也是不够用的！！^_^

安装一下插件
cnpm install --save-dev babel-core babel-loader babel-preset-es2015 babel-preset-react

支持es2015和React

package.json中能看到

 "devDependencies": {
    "babel-core": "^6.26.3",
    "babel-loader": "^8.0.5",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-react": "^6.24.1",
    "webpack": "^4.29.5",
    "webpack-cli": "^3.2.3",
    "webpack-dev-server": "^3.2.0"
  }

设置下方的配置后有问题，就是babel-loader第七版本才支持babel-core，所以需要重新安装7版本，其实我这块不会讲太详细主要是自己的进阶，百度webpack配置react环境会有很多比我详细的

    const path = require('path')
    module.exports={
        entry:'./app/index.js',
        output:{
            filename:'index.js',
            path:path.resolve(__dirname,'dist'),
            publicPath:'temp/'
        },
        module:{
            rules:[
                {
                    test:/\.js$/,
                    exclude:/node_modules/,//排除此文件夹
                    use:{
                        loader: "babel-loader",
                        options: {
                            presets: [
                                "es2015", "react"
                            ]
                        }
                    }
                }
            
            ]
        }
        ,
        devServer:{
            contentBase:'./', //根目录
            host:'localhost',
            compress:true,//压缩
            port:3000

        }
    }

在HTML页面中渲染app

然后安装一下react插件，因为是直接npm安装，应该是最新版的react了
cnpm install --save react react-dom

然后再app下的index.js，未转译的js中编写react代码

然后运行npm run start 页面已经成功显示了