手动配置react环境

1.创建一个项目文件夹

2.打开命令行，并进入项目文件夹。

3.执行npm init -y初始化一个package.json文件，记录项目所需的依赖。

4.然后在命令行输入以下命令来安装项目所需依赖。

npm install webpack webpack-dev-server babel-core babel-loader babel-preset-es2015 babel-preset-stage-0 babel-preset-react css-loader style-loader file-loader url-loader html-webpack-plugin -Dnpm install react react-dom bootstrap -S

• webpack 【项目打包工具】
• webpack-dev-server 【webpack提供的启动后台服务的工具】
• babel-core 【babel核心工具】
• babel-loader 【转译js文件的工具】
• babel-preset-es2015 【转译es6】
• babel-preset-stage-0 【转译es7】
• babel-preset-react 【转译react】
• css-loader 【转译css】
• style-loader 【将转译的css，以内嵌式的方式插入HTML文件】
• file-loader 【转译图片】
• url-loader 【处理路径】
• http-webpack-plugin 【编辑html文件】
• -D 【安装在开发环境】
• react 【。。。不介绍】
• react-dom 【。。。也不说了】
• bootstrap 【框架，只用来写css】
• -S 【安装在生产环境】

项目文件夹内容：           项目-|               |-node_modules               |-package.json

5.如果命令行特别牛逼，就用命令行操作以下操作就好。

不然就跟我一起用代码编辑器打开项目文件（我用webstorm）.
5.1 项目目录下创建src文件夹，然后在src下建立index.js(打包的入口文件)。
5.2 项目目录下创建html文件，作为编译html文件的模板。
5.3 项目目录下建立webpack.config.js文件。（名字一点不能错）

let path = require('path');let htmlWebpackPlugin = require('html-webpack-plugin');module.exports = {    entry:'./src/index.js',    output:{        path:path.resolve('build'),        filename:'bundle.js'    },    module:{        rules:[                {test:/\.js$/,loader:'bebal-loader',exclude:/node_modules/,query:{preset:['es2015','stage-0','react']}},                {test:/\.css$/,loader:['style-loader','css-loader']},                {test:/\.(jpg|png|gif|eot|svg|woff|woff2|ttf)$/,loader:'url-loader'}        ]    },    plugins:[        new htmlWebpackPlugin ({            template:'./index.html'        })    ]}

6.配置启动命令

6.1 找到并打开package.json文件。
6.2 找到scripts。
6.3 在scripts中写入以下代码：

     "dev":"webpack-dev-server --open",     "build":"webpack -p"

当在命令行项目文件下执行 npm run dev 后，会启动一个服务，并自动打开浏览器。
当在命令行项目文件下执行npm run build后，会打包文件，打包后的文件在，build文件夹下。

然后就可以用react写项目了。