1、創(chuàng)建根目錄
穿件一個(gè)project文件夾用vscode或者其他編輯器打開，接著使用npm init初始化一個(gè)項(xiàng)目，初始化完成之后會(huì)有一個(gè)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
安裝成功之后，會(huì)出現(xiàn)node_modules和pack-lock.json包
node_modules文件夾webpack相關(guān)的包依賴，pack-lock是對(duì)包依賴的描述
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這兩個(gè)包時(shí)要安裝大小相同的包
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",//本地服務(wù)器所加載的頁面所在的目錄
historyApiFallback: true,//不跳轉(zhuǎn)
inline: true,//實(shí)時(shí)刷新
},
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'] // 從右到左執(zhí)行，所以注意順序
}
]
},
plugins:[new htmlWebpackPlugin({
template:path.join(__dirname,'./public/index.html'),
filename: 'index.html'
})
],
}
6、創(chuàng)建項(xiàng)目
先創(chuàng)建一個(gè)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啟動(dòng)項(xiàng)目
希望大家多多點(diǎn)贊、支持！
