本系列文章详细阐述基于React18.x + Webpack5.x，从徒手搭建项目开始到各个常用插件的配置和应用，以及webpack5模块联邦微前端运用，分为Vue篇和React篇，以下是React篇。
1.准备环境安装Node.js
2.初始化项目
- 2.1新建一个文件夹，用vscode打开，然后打开终端，在终端窗口中执行 npm init -y 命令，会自动生成package.json文件，如下所示：
npm init -y
1.png
- 2.2手动在scripts对象里面添加脚本（先配置着等一下有用）：
"build": "webpack --config ./webpack.config.js"
在后续每次启动开发环境项目自测时，就需要执行 npm run build，此时，实际调用的就是 scripts 里的 build指定的脚本。
- 2.3执行如下命令，安装 webpack 及相关插件：
npm install webpack webpack-cli --save-dev
22.png
执行完上述命令后，可以打开 package.json 文件，看到多了 devDependencies节点，且该节点中包含了刚才安装的四个插件及其版本号。
333.png
-
2.4手动添加 webpack.config.js、index.html、src/main.js 三个文件，目录结构如下图：
4.png
其中，webpack.config.js 是 webpack 的配置文件，index.html 是网站入口 html 文件的模板，main.js 是打包入口文件。
webpack.config.js文件中添加如下代码：
'use strict'
const path = require('path')
module.exports = {
mode: 'development', // 环境模式
entry: './src/main.js', // 打包入口
output: {
path: path.resolve(__dirname, 'dist'), // 打包出口
filename: 'static/js/[name].js', // 打包完的静态资源文件名
}
}
- 2.5在终端执行打包命令（注意2.2这步是配置好脚本）
npm run build
执行命令后，可以看到如下输出，表示编译成功：
66.png
同时，自动在根目录下创建了 dist 目录，并创建了 main.js 文件，目录结构如下：
55.png
可以看出，编译过程没有将 html 文件打包输出，下一节介绍 html 打包插件
3.html 文件打包
- 3.1执行下列脚本添加 html 文件打包插件
npm install html-webpack-plugin -D
命令参数 -D 是指定插件为开发环境用插件，在 package.json 中配置在 devDependencies 节点； -S是指定插件为生产环境用插件，在package.json 中配置在 dependencies 节点。
- 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完整的文档如下：
7776.png
- 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编译代码，控制台执行 npm run build命令，显示如下输出，表示编译成功
8881.png
完成编译后，你可以看到dist目录下有 index.html 文件输出，其具体内容如下：
103.png
-
3.6运行网页，用浏览器打开 dist 目录下的 index.html 文件，即可看到如下的输出：
117.png
4.React文件打包
- 4.1安装React 执行命令：
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配置如下：
1231232.png
- 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执行 npm run build 打包命令，运行 dist 下面的 index.html文件 看到如下图：
1212120.png
5.启动Web服务 安装：
npm install webpack-dev-server -D
- 5.1增加编译脚本将 package.json 文件的 scripts 节点下添加 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执行npm run dev 启动web服务：
npm run dev
如下图：
999.png
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错误
]
},
如图下：
12349.png
终端执行 npm run dev 运行 如下图：
微信截图4441.png
7.模块联邦接收Vue 应用
- 7.1 webpack.config.js文件，配置模块联邦接收，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导出细节配置10.模块联邦
- 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导出细节配置10.模块联邦
终端执行 npm run dev 看到如图下效果：
微信46.png
以上是全部内容
网友评论