从零开始搭建一个React项目

1、初始化项目安装插件：npm init -y
2、安装webpack, 现在最流行的模块打包工具
webpackcli webpack的命令工具
webpack-dev-server - webpack官网出的一个小型express服务器，主要特性是支持热加载
webpack-merge: 引用通用的配置来组合
3、安装react相关插件：
npm install react react-dom
4、安装babel相关的插件
Babel-loader 文件处理器，加载js文件
@bable/core babel的核心功能
@babel/preset-env 将es6转换为es5
@bable/preset-react 转换react的语法
5、安装html-webpack-plugin的插件 自动生成html文件，尤其能随着编译的变化而变化，不需要手动改变bundle.js
6、配置webpack 方便维护和管理，在根文件夹下创建config文件,分别建立三个文件webpack.common.js（通用配置），webpack.dev.js开发环境配置，一个是生产环境的配置webpack.prod.js
webpack.common.js
const HtmlWebpackPlugin = require(‘html-webpack-plugin’);
const path = require(‘path’);
module.exports = {
//入口设置
entry:{
app:’./src/index.js’,//入口文件名
},
//http服务的设置
devServer:{
port:1234,
},
//管理资源
module:{
rules:[
{//加载js
test:/.js$/,
use:‘babel-loader’,
exclude:/node_modules/
}
]
},
//出口设置
output:{
filename:’[name].bundle.js’,
path:path.resolve(__dirname,’…/dist’)
},
plugins:[
new HtmlWebpackPlugin({
template:‘public/index.html’指定的html模板，这个会自动帮我引用下面output出口设置的文件名。
})
]
}
webpack.dev.js
const commmon = require(’./webpack.common.js’);
const merge = require(‘webpack-merge’);
module.exports = merge(commmon,{
mode:‘development’
});

webpack.prod.js
const commmon = require(’./webpack.common.js’);
const merge = require(‘webpack-merge’);
module.exports = merge(commmon,{
mode:‘production’
});
8、既然用react和es6，那就需要配置.babelrc，就在项目的根目录下新建
{
“presets”: [
“@babel/preset-env”,
“@babel/preset-react”,
]}
9、在项目的根目录下新建public，放index.htm
//index.html

10、在项目的根目录下新建src文件夹，然后再新建index.js文件 import React from 'react';import ReactDOM from 'react-dom';

ReactDOM.render(

Hello React.js

,
document.getElementById(‘root’), )