本文分為理論和實(shí)戰(zhàn)兩部分：
（最近項(xiàng)目核心框架版本升級(jí)，做了一些踩坑總結(jié)和小白指南。）
理論部分：
webpack v5.4.0+React v17.0.1 從0-1前端項(xiàng)目搭建步驟和小白科普。
【環(huán)境搭建的依賴總結(jié)】
Npm
是 Node.js 官方提供的包管理工具，他已經(jīng)成了 Node.js 包的標(biāo)準(zhǔn)發(fā)布平臺(tái)，用于 Node.js 包的發(fā)布、傳播、依賴控制。傳統(tǒng)的HTML,CSS,JS管理太繁雜，模塊化的開發(fā)大大的提高了開發(fā)效率，而npm就是為模塊化產(chǎn)生。
Webpack
是一個(gè)前端資源加載/打包工具（模塊打包器）。它將具有依賴關(guān)系的模塊進(jìn)行靜態(tài)分析，然后將這些模塊按照指定的規(guī)則生成對(duì)應(yīng)的靜態(tài)資源，打包為簡(jiǎn)潔版的瀏覽器可識(shí)別的靜態(tài)資源。
webpack是npm生態(tài)中的一個(gè)模塊，webpack的運(yùn)行依賴于node的環(huán)境。我們可以通過安裝webpack來(lái)使用webpack對(duì)項(xiàng)目進(jìn)行打包；就把你通過npm中安裝的模塊打包成更小的瀏覽器可讀的靜態(tài)資源。這里需要注意的是，webpack只是一個(gè)前端的打包工具，打包的是靜態(tài)資源，和后臺(tái)沒有關(guān)系，雖然webpack依賴于node環(huán)境。
正是因?yàn)閚pm的包管理，使得項(xiàng)目可以模塊化的開發(fā)，而模塊化的開發(fā)帶來(lái)的這些改進(jìn)大大的提高了開發(fā)效率，但是利用它們開發(fā)的文件往往需要進(jìn)行額外的處理才能讓瀏覽器識(shí)別，而手動(dòng)處理又是非常繁瑣的，這就是webpack工具存在的意義。
React
眾所周知的前端三大主流框架之一。前端主流框架都有一套自己的模板處理方法，React使用了它獨(dú)特的JSX語(yǔ)法。在組件中插入html的語(yǔ)法，簡(jiǎn)化創(chuàng)建view的流程。
在webpack中，JSX語(yǔ)法是不被Webpack識(shí)別的，Webpack默認(rèn)只能處理.js后綴名的文件。所以需要安裝第三方Babel處理非js文件。
Babel
是一個(gè) JavaScript 編譯器, 主要用于將 ECMAScript 2015+ 版本的代碼轉(zhuǎn)換為向后兼容的 JavaScript 語(yǔ)法，以便能夠運(yùn)行在當(dāng)前和舊版本的瀏覽器或其他環(huán)境中，讓你現(xiàn)在使用新的語(yǔ)法的時(shí)候無(wú)需等待瀏覽器的支持，React的JSX 語(yǔ)法就能夠借助Babel的 babel-loader處理JSX語(yǔ)法。將html的語(yǔ)法轉(zhuǎn)換成 React.creatElement的js語(yǔ)法形式，從而可以相互認(rèn)識(shí)。
React.createElement(a, b, c)
①參數(shù) a：表示元素的類型，比如：h1, div 等。
②參數(shù) b：表示該元素上的屬性，使用 JavaScript 對(duì)象方式表示。
③參數(shù) c：表示該元素內(nèi)部的內(nèi)容（子元素），可以是文字，可以繼續(xù)嵌套另外一個(gè) React.createElement(a, b, c)。
Eg: var content = React.createElement('ul',{ className: 'teststyle' }, [ child1, child2] );
下面就通過一個(gè)官網(wǎng)上的DEMO來(lái)實(shí)際的理解一下React.createElement(a, b, c)：
// JSX寫法:
class Hello extends React.Component{
render() {
return <div>Hello, { this.props.toWhat }</div>
}
}
ReactDOM.render(
<Hello toWhat='world'/>
,document.getElementById('root')
)
// 轉(zhuǎn)化為原生JS后的寫法
class Hello extends React.Component {
render(){
return React.createElement('div',null, `Hello,${this.props.toWhat}`)
}
}
ReactDOM.render(
React.createElement('Hello', { toWhat: 'world' }, null),
document.getElementById('root')
)
實(shí)踐部分：
【必坑指南】
在使用Webpack + React的最新版本搭建的項(xiàng)目的時(shí)候，一定要注意版本兼容問題，本帖所有依賴的版本都是相互兼容的，我是從渾水中淌出來(lái)的，大家安裝的時(shí)候要注意哦。
1，Node.jS安裝：
我的是當(dāng)前最新版@14.15.0，如已經(jīng)安裝請(qǐng)忽略這步，如果不會(huì)安裝請(qǐng)百度，網(wǎng)上教程很多。
安裝完Node.js后，npm 會(huì)隨同Node.js一起安裝好。
2，初始化項(xiàng)目：
1.創(chuàng)建項(xiàng)目文件夾case，并cd 進(jìn)入到根目錄case。
-
執(zhí)行初始化命令：npm init -y，生成package.json文件。2.png3.png
3，安裝React：
執(zhí)行命令=》 npm install react -S
4，安裝React-dom:
執(zhí)行命令=》 npm install react-dom -S
5，安裝webpack和webpack-cli：
執(zhí)行命令=》 npm install webpack@5.4.0 webpack-cli@3.3.12 -D
6，安裝babel：
執(zhí)行命令=》 npm i babel-loader @babel/core@babel/preset-env @babel/preset-react -D
7，在根目錄case下創(chuàng)建webpack.config.js文件，并在文件中配置對(duì)JSX語(yǔ)法的Babel編譯支持：
// webpack.config.jsn文件
module.exports= {
resolve:{
extensions: ['*', '.js','.jsx'] //后綴名自動(dòng)補(bǔ)全
},
module:{
rules:[
{
test: /\.jsx?$/,
exclude: /node_modules/, // 排除 node_modules 文件夾
use:{
loader: 'babel-loader', // babel-loader babel-loader處理JSX語(yǔ)法的。
options:{
babelrc: true,
presets: ['@babel/preset-react', '@babel/preset-env'],
cacheDirectory: true
}
}
},
]
}
}
8，在項(xiàng)目根目錄創(chuàng)建 app/main.js文件，app是源文件目錄，main.js文件內(nèi)容如下：
// main.js文件
import React from 'react'
import ReactDOM from 'react-dom'
ReactDOM.render(
<div> Hello React! </div>
, document.getElementById("root")
)
9，在webpack.config.js文件中配置入口文main.jsx件。
// webpack.config.js文件
module.exports= {
entry: './app/main.jsx',
resolve:{
extensions: ['*', '.js','.jsx'] //后綴名自動(dòng)補(bǔ)全
},
module:{
rules:[
{
test: /\.jsx?$/,
exclude: /node_modules/, // 排除 node_modules 文件夾
use:{
loader: 'babel-loader', // babel-loader babel-loader處理JSX語(yǔ)法的。
options:{
babelrc: true,
presets: ['@babel/preset-react', '@babel/preset-env'],
cacheDirectory: true
}
}
},
]
}
}
10，在項(xiàng)目根目錄創(chuàng)建template.html文件, template.html文件內(nèi)容如下:
// template.html文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HelloReact</title>
</head>
<body>
<div id="root"></div>
</body>
</html>
11，需要使用html-webpack-plugin插件來(lái)復(fù)制template.html 到 dist 文件夾下：
1、安裝html-webpack-plugin：
執(zhí)行命令=》 npm i html-webpack-plugin -D
2、修改webpack.config.js文件的配置如下：
// webpack.config.js文件
const HtmlWebPackPlugin = require('html-webpack-plugin')
module.exports= {
entry: './app/main.jsx',
resolve:{
extensions: ['*', '.js','.jsx'] //后綴名自動(dòng)補(bǔ)全
},
module:{
rules:[
{
test: /\.jsx?$/,
exclude: /node_modules/, // 排除 node_modules 文件夾
use:{
loader: 'babel-loader', // babel-loader babel-loader處理JSX語(yǔ)法的。
options:{
babelrc: true,
presets: ['@babel/preset-react', '@babel/preset-env'],
cacheDirectory: true
}
}
},
]
},
plugins:[
new HtmlWebPackPlugin({
template: 'public/index.html',
filename: 'index.html'
})
]
}
12，上面的都操作無(wú)誤后，就可以執(zhí)行命令打包了：
執(zhí)行命令=》 npx webpack --mode development
13，配置package.json文件如下所示：
// package.json文件
"scripts": {
"build": "webpack --mode production"
},
14，配置好了以后，我們就可以用命令來(lái)構(gòu)建項(xiàng)目了：
執(zhí)行命令=》 npm run build
15，配置項(xiàng)目的本地服務(wù)：
我們基于node.js的express搭建一個(gè)本地服務(wù)器，通過express的中間件 webpack-dev-middleware 來(lái)實(shí)現(xiàn)與 Webpack的交互。
1、 安裝webpack-dev-server:
執(zhí)行命令=》 npm i webpack-dev-server -D
2、在webpack.config.js配置文件中添加服務(wù)相關(guān)配置,如下：
// webpack.config.js文件
const path = require('path');
const HtmlWebPackPlugin = require('html-webpack-plugin')
module.exports= {
mode: 'development',
devtool: 'cheap-module-source-map',
entry: './app/main.jsx',
resolve:{
extensions: ['*', '.js','.jsx'] //后綴名自動(dòng)補(bǔ)全
},
module:{
rules:[
{
test: /\.jsx?$/,
exclude: /node_modules/, // 排除 node_modules 文件夾
use:{
loader: 'babel-loader', // babel-loader babel-loader處理JSX語(yǔ)法的。
options:{
babelrc: true,
presets: ['@babel/preset-react', '@babel/preset-env'],
cacheDirectory: true
}
}
},
]
},
plugins:[
new HtmlWebPackPlugin({
template: 'template.html',
filename: 'index.html'
})
],
devServer:{
contentBase: './dist',
publicPath: '/',
host: '127.0.0.1',
port: 3000,
},
}
3、package.json文件中scripts里添加start字段：
"scripts": {
"build": "webpack --mode production",
"start": "webpack-dev-server --mode development --open"
},
4、 執(zhí)行命令本地起服務(wù)：
到目前為止一個(gè)Webpack@5.4.0+React@17.0.1的前端項(xiàng)目就已經(jīng)搭建起來(lái)了。
最后一副對(duì)聯(lián)送給正在看文章的你：
上聯(lián)：遠(yuǎn)離電腦多運(yùn)動(dòng)；
下聯(lián)：少寫代碼多養(yǎng)身；
橫批：壽比南山。
