1、创建根目录
穿件一个project文件夹用vscode或者其他编辑器打开，接着使用npm init初始化一个项目，初始化完成之后会有一个package.json文件。
2、安装react
npm i react react-dom
3、安装webpack
安装命令：
npm i webpack@4.32.2 webpack-cli@2.0.9 webpack-dev-server@3.0.0
安装成功之后，会出现node_modules和pack-lock.json包
node_modules文件夹webpack相关的包依赖，pack-lock是对包依赖的描述
4、安装loader和plugins
安装babel编译ES6语法
npm i @babel/core@7.12.3 babel-loader@8.1.0 @babel/preset-react@7.12.1
安装loader编译css文件
npm i css-loader@5.0.0 style-loader@2.0.0
安装plugins打包HTML模板
注意：在安装@babel/coreh和@babel/preset-react这两个包时要安装大小相同的包
npm i html-webpack-plugin@4.5.0
5、配置webpack
const path = require('path');
const htmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry:'./src/index.js',
output:{
path:path.resolve(__dirname,'dist'),
filename:"main.js"
},
devServer: {
contentBase: "./public",//本地服务器所加载的页面所在的目录
historyApiFallback: true,//不跳转
inline: true,//实时刷新
},
module:{
rules:[
{
test: /\.js$/,
exclude: path.resolve(__dirname, 'node_modules'),
include: path.resolve(__dirname, 'src'),
loader:'babel-loader',
options:{
presets: [
"@babel/react"
]
}
},
{
test: /\.css$/,
use:['style-loader','css-loader'] // 从右到左执行，所以注意顺序
}
]
},
plugins:[new htmlWebpackPlugin({
template:path.join(__dirname,'./public/index.html'),
filename: 'index.html'
})
],
}
6、创建项目
先创建一个public文件夹，在该文件夹下面新建index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meat charset="UTF-8">
<meta name="viewport" content=""width=device-width>
<title>React</title>
</head>
<body>
<div id="app"></div>
</body>
</html>
在根目录下新建src文件夹，在src文件夹下新建index.js作为入口文件，新建index.css用于编写样式
import React from 'react'
import ReactDOM from "react-dom"
import './index.css'
const App = (
<div className="border">
<h1>哈哈</h1>
</div>
)
React.render(App,document.getElementById("app"))
7、使用npm start启动项目
希望大家多多点赞、支持！
