為什么要寫？
開始從事前端工作已經快2年了，之前做的是后端開發（php/3年），這么長的時間都沒有對腳手架進行詳細研究，都是拿來就用，也不仔細想想其中的原理，使用到的插件，只知道是webpack的封裝集合體。后來發現這種拿來就用的（不詳細了解其中原理）很低端，無法真正成為一個NB的開發者。所以今天開始先從頭學習一下React（畢竟大廠主力都用React 手動狗頭）。
1.創建webpack環境
// webpack 5.35.1
mkdir webpack-demo
cd webpack-demo
yarn init -y
// 安裝基礎 webpack組件
yarn add webpack webpack-cli --dev
// 安裝 webpack 開發服務器（用於熱加載）
yarn add webpack-dev-server --dev
// 安裝 html 插件（用於生成入口 html 文件的插件）
yarn add html-webpack-plugin --dev
2.創建html模板入口文件
位置：/public/index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title><%= htmlWebpackPlugin.options.title %></title>
</head>
<body>
<div id="app"></div>
</body>
</html>
3.創建JS入口文件
位置：/src/index.js
console.log("我是入口！我成功執行了！")
4.創建webpack配置文件
位置：/webpack.config.js
const path = require("path");
const HtmlWebPackPlugin = require("html-webpack-plugin");
module.exports = {
output: {
path: path.resolve(__dirname, "./dist"),
filename: "index_bundle.js",
},
plugins: [
new HtmlWebPackPlugin({
title: "Hello React!",
template: "./public/index.html",
}),
],
};
5.添加入口腳本
位置：/package.json
{
// 前后省略...
"scripts": {
"dev": "webpack serve --mode development",
"build": "webpack --mode production"
}
// ...
}
6.跑下試試先(沒問題再下一步)
yarn dev
7.安裝 react 框架
// 安裝基礎 react 框架
yarn add react react-dom
// 安裝 babel 插件
yarn add @babel/core babel-loader --dev
// 安裝解析react 相關插件(包含以下：)
// 1.@babel/plugin-syntax-jsx // 解析jsx語法
// 2.@babel/plugin-transform-react-jsx // jsx轉換為函數
// 3.@babel/plugin-transform-react-display-name // react 系統函數重命名（版本語法糖）
// 4.@babel/plugin-transform-react-jsx-self // webpack 開發模式下的jsx轉換
// 5.@babel/plugin-transform-react-jsx-source // webpack 開發模式下的jsx轉換
yarn add @babel/preset-react --dev
8.創建 babel 配置文件
位置：/.babelrc
{
"presets": [
"@babel/preset-react"
]
}
9.修改JS入口文件
位置：/src/index.js
import React from "react";
import ReactDom from "react-dom";
function App() {
return <h1>Hello World !</h1>;
}
ReactDom.render(<App />, document.getElementById("app"));
10.基礎環境搭建完成（跑一下）
yarn dev