创建React项目命令流程

使用官方脚手架creact-react-app

//首先通过npm全局安装create-react-app
npm install -g create-react-app
//然后使用create-react-app命令来创建项目
create-react-app <项目名>
//创建my-app项目
create-react-app my-app
cd my-app
npm run start    或   yarn start

安装webpack

首先安装webpack和webpack-cli,webpack-cli包含了webpack的众多指令，所以需要安装。

npm install webpack webpack-cli --save-dev

注意： 在这里简单介绍一下npm install命令的参数 --save-dev 和
–save的区别，一般来说使用–save-dev参数安装的npm包在最终打包的时候不会被包括到源码里去，所以类似bebel和webpack这种进行项目工程构建或者代码编译的库应该用–save-dev来安装，而–save则是安装代码运行必须的库，比如react等。

安装Babel

进行前端工程化的时候大多数前端工程师都会用到babel,最开始的babel是用来把es6的代码编译成es5的代码，让前端开发者在使用新的特性的同时不必考虑浏览器兼容问题。虽然现在的主流浏览器已经支持大部分的es6的新特性，但是因为JavaScript每年都会有一些新的特性被提出，而浏览器不一定能在特性推出后及时实现，或者是有一些还在实验中的语法。使用来babel后就可以忽略这些问题，可以放心使用新的JavaScript语法，甚至是实验性的语法。

//安装指令
npm install @babel/core babel-loader @babel/preset-env @babel/preset-react --save-dev

//在安装成功后必须进行babel的配置，在根目录my-app建立.babelrc文件，然后写入以下配置
{
   
  "presets": ["@babel/preset-env", "@babel/preset-react"]
}

//然后我们需要做一些webpack的配置，在根目录my-app建立webpack.config.js文件，然后写入以下配置

const path = require('path');
module.exports = {
   
  entry: './src/main.js',
  output: {
   
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')
  },
  module: {
   
    rules: [
      {
   
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
   
          loader: "babel-loader"
        }
      }
    ]
  }
};

处理html

安装html-webpack-plugin和html-loader

npm install html-webpack-plugin html-loader --save-dev

在安装完成之后我们需要在webpack.config.js中进行配置 webpack.config.js文件内容如下

const path = require