从0到1搭建react工程一（基础环境与devServer服务配置）

主要技术栈

构建工具：webpack v4.x
编译工具：babel v7.x
Js框架：Reactjs v16.8.x
UI库：antd v3.x

初始化工程

目录结构

react-project
/root
  package.json ------------------------- 项目配置信息
  webpack.config.js--------------------- 构建配置文件
  .babelrc ----------------------------- js编译配置文件
  index.html --------------------------- html
    /src ------------------------------- 源代码
      index.js ------------------------ 

// 初始化package.json
yarn init -y

依赖环境

// 安装react，react-dom
yarn add react react-dom antd

dependencies

• react
• react-dom
• antd

// 安装dev环境依赖
yarn add webpack webpakc-cli ... --dev

devDependencies

• webpack
• webpack-cli
• webpack-dev-server
• @babel/core
• @babel/preset-env
• @babel/preset-react
• babel-loader

在package.json中新增scripts字段，并写入start指令以webpack-dev-server启动工程，若不配置构建文件，默认以根目录下webpck.config.js || webpackfile.js为启动配置。即webpack-dev-server === webpack-dev-server --config webpack.config.js || webpackfile.js

最终的package.json文件

{
   
  "name": "react-project"