构建React项目

React项目构建

1.先建立一个文件夹，然后初始化npm init，生成package.json文件；

2.安装webpack相关插件npm install webpack webpack-cli webpack-dev-server webpack-merge ，其中，webpack-cli是webpack的命令工具，既然安装webpack，就必要安装这个，webpack-dev-server用于启动http服务，webpack-merge用于融合配置文件；

3.安装react相关插件npm install react react-dom；

4.安装babel相关插件npm install babel-loader @babel/core @babel/preset-env @babel/preset-react，其中，babel-loader是文件处理器，加载js文件，@babel/core是babel的核心功能，@babel/preset-env用于转换es5，@babel/preset-react用于转换react的语法；

5.安装html-webpack-plugin的插件npm install html-webpack-plugin，自动生成html文件，随着编译的变化而变化，不需要手动改变bundle.js；

6.在根目录新建config文件夹，在其中新建配置文件webpack.common.js（通用的配置），webpack.dev.js（开发环境的配置），webpack.prod.js（生产环境的配置），分别进行配置；

7.在根目录新建.babelrc，并配置；

8.在package.json中增加启动项目的命令；

9.在根目录新建public文件夹，在其中新建index.html并配置webpack.common.js；

10.在根目录新建src文件夹，在其中新建index.js作为入口文件；

11.npm run build/npm run dev。

12.注意安装其他常用插件并在webpack.common.js中配置，例如style-loader、css-loader、file-loader等。

React项目目录结构

 

参考：https://www.jianshu.com/p/8de454c1fed9