Vue3.x+webpack5.x，入门级别模块联邦微前端（Vu
本系列文章详细阐述基于Vue 3.X + Webpack5.x，从徒手搭建项目开始到各个常用插件的配置和应用，以及webpack5模块联邦微前端运用，分为Vue篇和React篇，一下是Vue篇。
Vue篇借鉴于此（大部分内容都是复制他的），非常感谢这位博主的无私奉献
1.准备环境
需要安装Node.js，然后全局安装vue， 安装插件时在插件名称后面用 @version 的格式指定版本号，如下示例：
npm install vue@3.2.31 -S
2.初始化项目
-2.1新建一个文件夹，用vscode打开，然后打开终端，在终端窗口中执行 npm init -y 命令，会自动生成package.json文件，如下所示：
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.vue文件打包
-4.1vue 插件安装，执行一下命令，此处需加上 @next 以获取最新的稳定版
npm install vue@next -S
-4.2在 src 目录下添加 App.vue 文件
<template>
<div>你好！你核酸了吗？</div>
</template>
<script setup>
</script>
-4.3修改 main.js 内容为如下内容：
import { createApp } from 'vue' // Vue 3.x 引入 vue 的形式
import App from './App.vue' // 引入 APP.vue
const app = createApp(App) // 初始化应用
app.mount('#app') // 将 App 中模板内容挂载到 app 节点
从中可以看出，对于 vue 3.X 来说，Vue已成为全局对象
-4.4代码编译，此时执行 npm run build，会收到如下报错信息：
118.png
出错提示中告知需要一款合适的加载器处理<template>文件类型，查资料可知，需要安装 vue-loader 插件。
vue-loader 本质上就是一个代码解析器和翻译器，其能够解析和翻译其中的<template>和<script>标签的内容，但是，对于<style>标签，它会提交给其他加载器处理，后续会陆续介绍这部分内容。
-4.5安装 vue-loader 插件，执行一下命令：
npm install vue-loader@next -D
在 webpack.config.js 中添加如下配置：
'use strict'
const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const { VueLoaderPlugin } = require('vue-loader')
module.exports = {
mode: 'development', // 环境模式
entry: './src/main.js', // 打包入口
output: {
path: path.resolve(__dirname, 'dist'), // 打包出口
filename: 'static/js/[name].js', // 打包完的静态资源文件名
},
plugins: [
new HtmlWebpackPlugin({
template: 'index.html', // 打包的 html 模板
filename: 'index.html', // 打包输出的文件名
title: '学习webpack' // html 文件内可以通过 <%= htmlWebpackPlugin.options.title %> 引用
}),
new VueLoaderPlugin()
],
module: {
rules: [
{
test: /\.vue$/, // 文件扩展名 .vue 的正则表达式
use: ['vue-loader'] // 使用 vue-loader 加载器
}
]
}
}
-4.6编译并执行，执行 npm run build命令，然后用浏览器打开 dist 目录下的 index.html 文件，可以看到如下内容：
119.png
5.CSS解析
-5.1添加 CSS 代码，在 App.vue 文件中添加如下代码
<style>
div {
color: red
}
</style>
-5.2编译，执行 npm run build 时，会报如下错误信息：
200.png
出错提示中告知需要一款合适的加载器处理 div 的解析，由于要对 div 解析，首先要解析 <style> 标签，但是，vue-loader 自身不处理 <style> 标签，故需要先加载 vue-style-loader ，然后加载 css-loader 插件。
-5.3插件安装，执行下列命令安装 vue-style-loader、css-loader 插件
npm install vue-style-loader css-loader -D
在 webpack.config.js 中 module-rules 节点中增加如下规则：
{
test: /\.css$/, // 文件扩展名 .css 的正则表达式
use: ['vue-style-loader', 'css-loader'] // 使用 vue-style-loader、css-loader 加载器
}
注意，use 中的两个插件的先后关系不可以写反，先后关系表示处理的前后关系，即先由 vue-style-loader 处理<style>标签，然后调用 css-loader 处理标签里的 css 内容。
-5.4编译并执行，执行命令 npm run build，并用浏览器打开 dist 目录下的 index.html，可以看到如下效果：
201.png
6.less（css预处理语言）文件打包
-6.1添加 less 代码，在 App.vue 文件中添加如下代码:
<template>
<div class="div">你好！你核酸了吗？
<span class="span">核酸时间2天了，马上去做核酸</span>
</div>
</template>
<script setup>
</script>
<style lang="less">
.div {
color: red;
.span{
font-weight: 700;
font-size:30px
}
}
</style>
-6.2编译，执行 npm run build 时，会报如下错误信息：
202.png
出错提示，需要额外的加载器来处理这些加载器的结果，为此我们需要less 和 less-loader执行一下命令：
npm install less@3.9.0 less-loader@4.1.0 --save-dev
在 webpack.config.js 中 module-rules 节点中增加如下规则：
{
test: /\.less$/i,
use: [
'vue-style-loader',
'css-loader',
'less-loader',
],
},
此时webpack.config.js 完整配置如下：
203.png
-6.3编译，执行 npm run build ，运行 dist 下的 index.html文件看到如下图：
204.png
7.启动Web服务
上述过程中，每次都要打开 index.html 文件才能看到效果，而且随着后续功能的扩展，静态文件无法实现服务器的完整效果，故需要提供自动加载Web服务的功能。
-7.1插件安装， 执行下列脚本安装 webpack-dev-server 插件：
npm install webpack-dev-server -D
-7.2增加编译脚本将 package.json 文件的 scripts 节点下添加 dev 命令脚本，如下：
"dev": "webpack serve --progress --config webpack.config.js"
此时package.json文件如图：
205.png
-7.3修改配置文件，将 webpack.config.js 文件的 module.exports 中增加如下配置：
devServer: {
host: 'localhost', //本地域名，默认都是写 localhost
port: 8080, //端口号 number类型
open: true,//是否自动打开浏览器 布尔值
}
-7.4编译，执行 npm run dev，浏览器上显示如下内容：
206.png
8.便利配置
-8.1自动匹配文件扩展名，在 webpack.config.js 的 module.exports 中添加 extensions 配置项：
resolve: {
extensions: ['.js', '.vue', '.json'], // 可以省略的文件扩展名
}
添加上述配置项后，可以在文件路径描述中，省去 .js、.vue、json三种扩展名，例如：
import App from './App.vue'
改成：
import App from './App'
-8.2添加指向 src 目录的匿名，在 webpack.config.js 的 module.exports 中添加 alias 配置项：
alias:{
'@': path.resolve(__dirname, 'src') // 路径中用 @ 表示 src 目录
}
添加上述 @ 匿名的配置项后，可以将指向 src 的路径直接用 @ 表示，例如：
import Home from '../src/views/Home'
可以改写成：
import Home from '@/views/Home'
9.清理dist目录插件
默认情况下，每次编译都不会清空 dist 目录，这将导致会存在一些废旧文件存在于该目录中，故可以引入 clean-webpack-plugin 插件，先清除 dist 目录，然后再编译文件。
-9.1安装插件
npm install clean-webpack-plugin -D
-9.2配置 webpack.config.js，增加如下代码：
//在顶部增加如下代码
const { CleanWebpackPlugin } = require('clean-webpack-plugin')
//在 plugins 节点中增加如下代码
new CleanWebpackPlugin()
终端执行 npm run dev ，可以看到dist 目录被清空。
10.模块联邦
利用webpack5内置的ModuleFederationPlugin暴露vue的应用出去，另外一个应用（React、Vue）都可以使用该应用，这里以一个组件为例
-10.1 目录src下面创建一个component目录，component里面创建一个Test.js文件，Test.js代码如下：
import { createVNode,render ,h} from "vue";
// vue 函数式组件
export function msgOne(opiton) {
const vnode = h(
'div', // type
{ id: 'foo', class: 'bar',style:'color:blue' }, // props
'莫愁前路无知己，天下谁人不识君'
)
const instance = createVNode(vnode, opiton);
const container = document.querySelector('body')
render(instance, container);
}
App.vue文件引入组件，代码如下：
<template>
<div class="div">你好！你核酸了吗？
<span class="span">核酸时间2天了，马上去做核酸</span>
<Home />
{{msgOne()}}
</div>
</template>
<script setup>
import Home from '@/views/home'
import {msgOne} from '@/component/Test'
</script>
<style lang="less">
.div {
color: red;
.span{
font-weight: 700;
font-size:30px
}
}
</style>
终端执行 npm run dev 运行，结果如下：
207.png
函数式定义的应用，本项目使用没有问题， (蓝色字体的那个)已经加载过来了。
-10.2 webpack.config.js文件，需要配置如下图：
// 顶部引入webpack内置模块
const { ModuleFederationPlugin } = require("webpack").container;
//plugins 配置项中添加
new ModuleFederationPlugin({
name: 'lib_remote', // 共享范围中的模块名称
filename: 'remoteEntry.js', // 共享范围中的文件
exposes: {
'./test':'./src/component/Test.js',// 共享范围中的文件路径
},
})
//output 配置项中添加
publicPath: 'http://localhost:8080/',//指定输出的路径 这里以本地路径为例，生产模式换成真正的路径
//devServer 配置项的 port 需要与 publicPath 端口号一致
devServer: {
host: 'localhost', //本地域名，默认都是写 localhost
port: 8080, //端口号 number类型
open: true,//是否自动打开浏览器 布尔值
},
webpack模块联邦到此基础配置完成，React项目运用，查看React篇
