[Task] qiankun webpack 插件

[kuitos]

webpack 配套的 qiankun 插件，提供以下能力：

1. 子应用无需手动配置 webpack，引入插件即可
2. 子应用 entry js 自动打上 entry 属性
3. 默认 libraryTarget 可以直接改成 window 了
4. 主应用 & 子应用支持生成 dependencymap 配置，使用运行时依赖复用

[kuitos]

@nayonglin 确认领取的话，这里先写一个 RFC？

[nayonglin]

@nayonglin 确认领取的话，这里先写一个 RFC？

没问题，本周内搞定，我这两天先熟悉一下3.0的源码

[kuitos]

1、2、3跟3.0没有强耦合，可以先做

[nayonglin]

1、2、3跟3.0没有强耦合，可以先做

好的，1和3能理解，第2个能详细讲一下是要做什么吗？

[kuitos]

子应用的 entry script 是需要打上属性标记的，不然容易出现各种 lifecycle 找不到的问题

[nayonglin]

子应用的 entry script 是需要打上属性标记的，不然容易出现各种 lifecycle 找不到的问题

ok

[nayonglin]

@kuitos 插件源码需要放在哪里呀？我直接在packages里建一个子包？

[kuitos]

是的，新建一个包

[Shyam-Chen]

想詢問一下，會在規劃 Vite 5 嗎？

[nayonglin]

@kuitos 看一下哈，需求是否对齐，是否有补充
RFC: QiankunOutputPlugin for Webpack

摘要
本 RFC 提议为 qiankun 添加一个新的 Webpack 插件：QiankunOutputPlugin，用于简化微应用的 Webpack 配置，使其更容易地与 qiankun 集成。

背景
当前，为了使一个微应用与 qiankun 集成，开发者需要手动修改其 Webpack 配置，包括 library、libraryTarget 和 jsonpFunction 等。这一过程既繁琐又容易出错。
为了简化这一过程并减少集成中的错误，我们提议开发一个 Webpack 插件，自动完成这些配置。

提议
引入一个名为 QiankunOutputPlugin 的 Webpack 插件，其主要功能如下：

1. 自动设置 output.library 为 ${packageName}-[name]。
2. 根据 Webpack 版本自动设置 output.libraryTarget 或 output.library.type 为 window。
3. 自动设置 output.chunkLoadingGlobal 为 webpackJsonp_${packageName}。
4. 自动设置jsonpFunction为webpackJsonp_${packageName}。
5. 自动设置globalObject为window。
6. 构建自动给入口js加上entry标记。
7. 主应用 & 子应用支持生成 dependencymap 配置，使用运行时依赖复用（二期）

使用方法：

const QiankunOutputPlugin = require('qiankun-webpack-plugin');

module.exports = {
// ... 其他配置
plugins: [
new QiankunOutputPlugin()
]
}

示例
在一个微应用的 Webpack 配置中，只需添加上述插件即可完成与 qiankun 的集成。

向后兼容性
此插件不会影响现有的 qiankun 功能，也不会引入破坏性的改动。它只是为了简化微应用的 Webpack 配置，插件同时支持webpack4和webpack5。

实现策略

1. 检测 Webpack 版本。
2. 根据版本自动设置相应的 output 配置。
3. 构建自动给入口js加上entry标记（依赖html-webpack-plugin插件）
4. 如果用户已经设置了相关的配置，插件不会覆盖用户的配置。

[kuitos]

需支持两个版本吗？比如webpack4和5

[kuitos]

library可以改成默认只配 packageName了，packageName–name是多webpack entry才需要的，可以默认不考虑了

[nayonglin]

需支持两个版本吗？比如webpack4和5

可以都支持，因为看到现在官网手动改造的教程是4和5都有

[nayonglin]

library可以改成默认只配 packageName了，packageName–name是多webpack entry才需要的，可以默认不考虑了

ok

[kuitos]

需支持两个版本吗？比如webpack4和5

可以都支持，因为看到现在官网手动改造的教程是4和5都有

都支持的话需要发两个插件包吗？还是一个包就能兼容？

[nayonglin]

需支持两个版本吗？比如webpack4和5

可以都支持，因为看到现在官网手动改造的教程是4和5都有

都支持的话需要发两个插件包吗？还是一个包就能兼容？

我先尝试一个包兼容两个版本，如果实现上有解决不了的问题，就优先支持webpack5

[nayonglin]

子应用的 entry script 是需要打上属性标记的，不然容易出现各种 lifecycle 找不到的问题

这里的entry是指webpack的output文件对吧？如果多入口的话需要给每一个js都打上entry吗？还是只考虑单bundle即可

[kuitos]

比如常见的 code split 打出两个 chunk，一个 common.js 一个 app.js，那打出来的 html 应该是

<script src="common.js"></script>
<script src="app.js" entry></script>

[nayonglin]

比如常见的 code split 打出两个 chunk，一个 common.js 一个 app.js，那打出来的 html 应该是

<script src="common.js"></script>
<script src="app.js" entry></script>

要不插件增加一个可选参数让用户自己指定要给哪些js增加entry标记，类似这个实现webpack-nomodule-plugin

[kuitos]

这个不应该手动指定的，一个 html 里只会有一个 entry js

[nayonglin]

这个不应该手动指定的，一个 html 里只会有一个 entry js

自动处理看起来场景比较复杂，例如examples里的react16，code split之后，qiankun的生命周期钩子不是在entry的js（static/js/bundle.js）暴露出来，而是在/static/js/main.chunk.js暴露的

[kuitos]

大部分情况下，是不是通过 HTMLWebpackPlugin 提供的 files.js 数组里最后一个非异步脚本，就可以确定 entry JS了？

[nayonglin]

大部分情况下，是不是通过 HTMLWebpackPlugin 提供的 files.js 数组里最后一个非异步脚本，就可以确定 entry JS了？

嗯嗯，大部分情况是这样，只是这样可能不太可靠，或者就默认以最后一个为entry，特殊情况用户也可以通过插件参数指定？

[qiYuei]

现在要兼容 webpack4 和 webpack5 后续还可能有 vite 。使用 unplugin 来做成单包兼容,webapck|vite|Repack 这种会不会好点

[kuitos]

使用 unplugin 来做成单包兼容,webapck|vite|Repack 这种会不会好点

unplugin 看着不错，如果能支持我们的功能那可以试试。

嗯嗯，大部分情况是这样，只是这样可能不太可靠，或者就默认以最后一个为entry，特殊情况用户也可以通过插件参数指定？

可以的，不过我感觉这个配置不用现在就提供，可以后面发布后收集一下场景，看看什么样的才需要手动指定？🤔

[nayonglin]

使用 unplugin 来做成单包兼容,webapck|vite|Repack 这种会不会好点

unplugin 看着不错，如果能支持我们的功能那可以试试。

嗯嗯，大部分情况是这样，只是这样可能不太可靠，或者就默认以最后一个为entry，特殊情况用户也可以通过插件参数指定？

可以的，不过我感觉这个配置不用现在就提供，可以后面发布后收集一下场景，看看什么样的才需要手动指定？🤔

可以，初期不用搞得太复杂，实在有这个需求再增加

[Clarkkkk]

请问这个插件能支持qiankun 2.x吗