从0搭建react开发环境

新建项目目录

首先、新建一个文件夹作为项目文件夹，并在空的项目文件夹中用npm init命令初始化，初始化之后会生成一个package.json文件，该文件中包含项目的基本信息。

安装项目依赖

① 安装react： npm install --save react react-dom

② 安装webpack： npm install --save-dev webpack webpack-cli

③ 安装babel编译器： npm install --save-dev babel-core babel-loader babel-preset-es2015 babel-preset-react

（注：安装时babel-core是6.x版本，而babel-loader是8.x版本，这两个版本不兼容，所以需要将babel-loader换成7.x的版本，使用命令 npm install -D babel-loader@7 ）

编写测试页面

在根目录下创建两个文件夹，一个src文件夹用来存储项目源码，一个dist文件夹用来保存分发文件，webpack每一次编译的输出结果都输出到dist中，并供给html引用

编写webpack和babel的配置文件

webpack的配置文件为webpack.config.js

babel的配置文件为.babelrc

搭建webpack服务器

先安装webpack-dev-server：npm install --save-dev webpack-dev-server

再在根目录下建立bin目录，并在bin目录下建立webpack-dev-server的配置文件dev-server.js

编写npm脚本

运行

运行命令npm run start，并在浏览器地址栏中输入http://localhost:7890 就可浏览页面

 （以上内容参考简书https://www.jianshu.com/p/3f83dd7211c0流程创建，并按照实际需要更改了一些内容，后续对webpack和babel有了更深刻的理解会来补充）