Vue3.x+webpack5.x，入门级别模块联邦微前端（Vu

作者: 七个隆咚锵 | 来源:发表于2022-08-09 15:36 被阅读0次

本系列文章详细阐述基于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篇

Vue3.x+webpack5.x，入门级别模块联邦微前端（Vu

1.准备环境

2.初始化项目

3.html 文件打包

4.vue文件打包

5.CSS解析

6.less（css预处理语言）文件打包

7.启动Web服务

8.便利配置

9.清理dist目录插件

10.模块联邦

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读