本系列文章詳細闡述基于React18.x + Webpack5.x，從徒手搭建項目開始到各個常用插件的配置和應用娃磺，以及webpack5模塊聯(lián)邦微前端運用，分為Vue篇和React篇叫倍，以下是React篇偷卧。
1.準備環(huán)境安裝Node.js
2.初始化項目
- 2.1新建一個文件夾，用vscode打開吆倦，然后打開終端听诸，在終端窗口中執(zhí)行 npm init -y 命令，會自動生成package.json文件蚕泽，如下所示：
npm init -y
- 2.2手動在scripts對象里面添加腳本（先配置著等一下有用）：
"build": "webpack --config ./webpack.config.js"
在后續(xù)每次啟動開發(fā)環(huán)境項目自測時晌梨，就需要執(zhí)行 npm run build，此時赛糟，實際調用的就是 scripts 里的 build指定的腳本派任。
- 2.3執(zhí)行如下命令砸逊，安裝 webpack 及相關插件：
npm install webpack webpack-cli --save-dev
執(zhí)行完上述命令后璧南，可以打開 package.json 文件，看到多了 devDependencies節(jié)點师逸，且該節(jié)點中包含了剛才安裝的四個插件及其版本號司倚。
-
2.4手動添加 webpack.config.js、index.html篓像、src/main.js 三個文件动知，目錄結構如下圖：
4.png
其中，webpack.config.js 是 webpack 的配置文件员辩，index.html 是網(wǎng)站入口 html 文件的模板盒粮，main.js 是打包入口文件。
webpack.config.js文件中添加如下代碼：
'use strict'
const path = require('path')
module.exports = {
mode: 'development', // 環(huán)境模式
entry: './src/main.js', // 打包入口
output: {
path: path.resolve(__dirname, 'dist'), // 打包出口
filename: 'static/js/[name].js', // 打包完的靜態(tài)資源文件名
}
}
- 2.5在終端執(zhí)行打包命令（注意2.2這步是配置好腳本）
npm run build
執(zhí)行命令后奠滑，可以看到如下輸出丹皱，表示編譯成功：
同時妒穴，自動在根目錄下創(chuàng)建了 dist 目錄，并創(chuàng)建了 main.js 文件摊崭，目錄結構如下：
可以看出讼油，編譯過程沒有將 html 文件打包輸出，下一節(jié)介紹 html 打包插件
3.html 文件打包
- 3.1執(zhí)行下列腳本添加 html 文件打包插件
npm install html-webpack-plugin -D
命令參數(shù) -D 是指定插件為開發(fā)環(huán)境用插件呢簸，在 package.json 中配置在 devDependencies 節(jié)點矮台； -S是指定插件為生產(chǎn)環(huán)境用插件，在package.json 中配置在 dependencies 節(jié)點根时。
- 3.2設置 webpack.config.js 文件,添加如下代碼:
const HtmlWebpackPlugin = require('html-webpack-plugin')
//其他代碼
plugins: [
new HtmlWebpackPlugin({
template: 'index.html', // 打包的 html 模板
filename: 'index.html', // 打包輸出的文件名
title: '學習webpack' // html 文件內可以通過 <%= htmlWebpackPlugin.options.title %> 引用
})
]
此時 webpack.config.js完整的文檔如下：
- 3.3添加 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.4添加 main.js 內容
const app = document.getElementById('app')
app.textContent = '你好瘦赫！'
-
3.5編譯代碼，控制臺執(zhí)行 npm run build命令蛤迎，顯示如下輸出耸彪，表示編譯成功
8881.png
完成編譯后，你可以看到dist目錄下有 index.html 文件輸出忘苛，其具體內容如下：
-
3.6運行網(wǎng)頁蝉娜，用瀏覽器打開 dist 目錄下的 index.html 文件，即可看到如下的輸出：
117.png
4.React文件打包
- 4.1安裝React 執(zhí)行命令：
npm install react react-dom --save-dev
- 4.2安裝@babel/preset-react 預設起到的就是將jsx進行轉譯的作用：
npm install @babel/preset-react
- 4.3安裝@babel/core 預設將ES6代碼轉換為ES5：
npm install @babel/core
- 4.4安裝babel-loader 預處理器
npm install babel-loader
安裝完成package.json配置如下：
- 4.5webpack.config.js文件module.exports增加配置：
module:{
// loader 配置項
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader',
options: {
presets: ['@babel/preset-react'],
}
}
},
]
} ,
- 4.6src文件下的main.js修改為：
import React from "react";
import { createRoot } from 'react-dom/client'
const App = ()=>{
function handleClick() {
console.log(111);
}
return (
<div className="indexCalss indexCalssLess">
hello react
<div onClick={handleClick}>測試</div>
</div>
)
}
const container = document.getElementById('app');
const root = createRoot(container);
root.render( <App />);
-
4.7執(zhí)行 npm run build 打包命令扎唾，運行 dist 下面的 index.html文件 看到如下圖：
1212120.png
5.啟動Web服務 安裝：
npm install webpack-dev-server -D
- 5.1增加編譯腳本將 package.json 文件的 scripts 節(jié)點下添加 dev 命令腳本召川，如下：
"dev": "webpack serve --progress --config webpack.config.js"
修改配置文件，將 webpack.config.js 文件的 module.exports 中增加如下配置：
devServer: {
host: 'localhost', //本地域名胸遇，默認都是寫 localhost
port: 8089, //端口號 number類型
open: true,//是否自動打開瀏覽器 布爾值
}
- 5.2執(zhí)行npm run dev 啟動web服務：
npm run dev
如下圖：
6.css荧呐、less配置
- 6.1 安裝依賴：
npm install css-loader style-loader less-loader@6 -D
src目錄下面增加 index.css 和 indexONe.less 兩個文件：
index.css
//index.css
.indexCalss {
color: red;
font-weight: 700;
text-align: center;
}
indexONe.less
//indexONe.less
.indexCalssLess {
background-color: #fff;
.span {
color: blue;
}
}
main.js引入樣式：
import React from "react";
import { createRoot } from 'react-dom/client'
import './index.css'
import './indexONe.less'
const App = ()=>{
function handleClick() {
console.log(111);
}
return (
<div className="indexCalss indexCalssLess">
hello react
<div className="span" onClick={handleClick}>測試</div>
</div>
)
}
const container = document.getElementById('app');
const root = createRoot(container);
root.render( <App />);
webpack.config.js 文件 module.rules下增加配置：
{
test: /\.(css|less)$/,
use: [
'style-loader',
'css-loader',
{loader: 'less-loader', options: {lessOptions: {javascriptEnabled: true}}} // 當解析antd.less，必須寫成下面格式纸镊，否則會報Inline JavaScript is not enabled錯誤
]
},
如圖下：
終端執(zhí)行 npm run dev 運行 如下圖：
7.模塊聯(lián)邦接收Vue 應用
- 7.1 webpack.config.js文件倍阐，配置模塊聯(lián)邦接收，webpack內置方法逗威，不需要要下載可以直接用：
// 頂部引入
const { ModuleFederationPlugin } = require("webpack").container;
//plugins 配置項中增加
new ModuleFederationPlugin({
name: 'reactApp',//模塊名稱
remotes: {
lib_remote: "lib_remote@http://localhost:8080/remoteEntry.js", //需要依賴的遠程模塊峰搪，用于引入外部其他模塊；
},
shared:{ //配置共享的組件凯旭，一般是對第三方庫做共享使用概耻；
vue:{
eager:true
}
}
})
remotes來源查看vue篇，exposes導出細節(jié)配置10.模塊聯(lián)邦
- 7.2 main.js文件中引入 應用：
import React from "react";
import { createRoot } from 'react-dom/client'
import './index.css'
import './indexONe.less'
(function(){
import('lib_remote/test').then(res=>{
const {msgOne} = res
msgOne()
})
})()
const App = ()=>{
function handleClick() {
console.log(111);
}
return (
<div className="indexCalss indexCalssLess">
hello react
<div className="span" onClick={handleClick}>測試</div>
</div>
)
}
const container = document.getElementById('app');
const root = createRoot(container);
root.render( <App />);
提示：應用提供方罐呼，需要啟動項目鞠柄，否則獲取不到lib_remote/test 文件而失敗
注意： import('lib_remote/test').then(res=>{const {msgOne} = res msgOne()}) 具體配置以及路徑需要查看 vue篇，exposes導出細節(jié)配置10.模塊聯(lián)邦
終端執(zhí)行 npm run dev 看到如圖下效果：
以上是全部內容
