diff --git a/.changeset/modern-kiwis-tap.md b/.changeset/modern-kiwis-tap.md
new file mode 100644
index 000000000..9c2bfad79
--- /dev/null
+++ b/.changeset/modern-kiwis-tap.md
@@ -0,0 +1,5 @@
+---
+"@qiankunjs/webpack-plugin": patch
+---
+
+feat: introduce qiankun webpack plugin
diff --git a/examples/main/index.html b/examples/main/index.html
index bdbbc8716..45dfdaa63 100644
--- a/examples/main/index.html
+++ b/examples/main/index.html
@@ -36,7 +36,7 @@
QianKun
-
+
diff --git a/examples/react15/webpack.config.js b/examples/react15/webpack.config.js
index 5bace503c..a8604aab6 100644
--- a/examples/react15/webpack.config.js
+++ b/examples/react15/webpack.config.js
@@ -1,5 +1,8 @@
const HtmlWebpackPlugin = require('html-webpack-plugin');
const { name } = require('./package');
+const QiankunPlugin = require('../../packages/webpack-plugin/dist/cjs');
+
+
module.exports = {
entry: './index.js',
@@ -51,6 +54,7 @@ module.exports = {
collapseWhitespace: true,
},
}),
+ new QiankunPlugin(),
],
externals: {
react: 'React',
diff --git a/examples/react16/.rescriptsrc.js b/examples/react16/.rescriptsrc.js
index bf4128b60..a8997c90b 100644
--- a/examples/react16/.rescriptsrc.js
+++ b/examples/react16/.rescriptsrc.js
@@ -1,11 +1,9 @@
-const { name } = require('./package');
+const QiankunPlugin = require('../../packages/webpack-plugin/dist/cjs');
+
module.exports = {
webpack: config => {
- config.output.library = `${name}-[name]`;
- config.output.libraryTarget = 'umd';
- config.output.jsonpFunction = `webpackJsonp_${name}`;
- config.output.globalObject = 'window';
+ config.plugins.push(new QiankunPlugin());
return config;
},
diff --git a/package.json b/package.json
index df6609c21..a45784c92 100644
--- a/package.json
+++ b/package.json
@@ -8,7 +8,7 @@
"start:example": "pnpm run build && npm run start:main && npm run start:react15",
"start:main": "cd ./examples/main && npm start",
"start:react15": "cd ./examples/react15 && npm start",
- "build": "pnpm -r --filter=./packages/**/* run build",
+ "build": "pnpm -r --filter=./packages/**/* --filter=!./packages/**/tests/* run build",
"prerelease:alpha": "changeset pre enter alpha && changeset && changeset version",
"release:alpha": "pnpm run build && changeset publish && changeset pre exit",
"lint": "eslint packages/",
diff --git a/packages/webpack-plugin/.fatherrc.js b/packages/webpack-plugin/.fatherrc.js
new file mode 100644
index 000000000..44aef69bc
--- /dev/null
+++ b/packages/webpack-plugin/.fatherrc.js
@@ -0,0 +1 @@
+export { default } from '../../.fatherrc.cjs';
diff --git a/packages/webpack-plugin/README-zh.md b/packages/webpack-plugin/README-zh.md
new file mode 100644
index 000000000..274cf276b
--- /dev/null
+++ b/packages/webpack-plugin/README-zh.md
@@ -0,0 +1,53 @@
+# @qiankunjs/webpack-plugin
+
+`@qiankunjs/webpack-plugin` 是一个为 [qiankun](https://github.com/umijs/qiankun) 微前端框架设计的 Webpack 插件,用于简化和自动化与 qiankun 集成的一些常见配置。
+
+## 功能
+
+- 自动设置输出库的名称和格式。
+- 确保 `jsonpFunction` 名称的唯一性。
+- 设置全局对象为 `window`,确保库可以在浏览器中运行。
+- 自动为 html 中的入口script标签加上entry标记
+
+## 安装
+
+使用 npm:
+
+```bash
+npm install @qiankunjs/webpack-plugin --save-dev
+```
+
+或使用 yarn:
+
+```bash
+yarn add @qiankunjs/webpack-plugin --dev
+```
+
+## 使用
+
+在您的 `webpack.config.js` 或其他配置文件中:
+
+```javascript
+const QiankunPlugin = require('@qiankunjs/webpack-plugin');
+
+module.exports = {
+ // ... 其他配置
+ plugins: [
+ new QiankunPlugin({
+ packageName: 'optionalPackageName', // 可选,如果不提供,将使用 package.json 中的名称
+ }),
+ ],
+};
+```
+
+## 选项
+
+- `packageName`: 指定输出库的名称。如果未提供,将使用 `package.json` 中的名称。
+
+## 贡献
+
+欢迎任何形式的贡献!请提交 PR 或开启 issue 讨论。
+
+## 许可证
+
+MIT
diff --git a/packages/webpack-plugin/README.md b/packages/webpack-plugin/README.md
new file mode 100644
index 000000000..77d82c99e
--- /dev/null
+++ b/packages/webpack-plugin/README.md
@@ -0,0 +1,53 @@
+# @qiankunjs/webpack-plugin
+
+`@qiankunjs/webpack-plugin` is a Webpack plugin designed for the [qiankun](https://github.com/umijs/qiankun) micro-frontend framework, aiming to simplify and automate some common configurations when integrating with qiankun.
+
+## Features
+
+- Automatically sets the name and format of the output library.
+- Ensures the uniqueness of the `jsonpFunction` name.
+- Sets the global object to `window`, ensuring the library can run in the browser.
+- Automatically adds an entry marker to the entry script tag in HTML.
+
+## Installation
+
+Using npm:
+
+```bash
+npm install @qiankunjs/webpack-plugin --save-dev
+```
+
+Or using yarn:
+
+```bash
+yarn add @qiankunjs/webpack-plugin --dev
+```
+
+## Usage
+
+In your `webpack.config.js` or other configuration files:
+
+```javascript
+const QiankunPlugin = require('@qiankunjs/webpack-plugin');
+
+module.exports = {
+ // ... other configurations
+ plugins: [
+ new QiankunPlugin({
+ packageName: 'optionalPackageName', // Optional, if not provided, the name from package.json will be used
+ }),
+ ],
+};
+```
+
+## Options
+
+- `packageName`: Specifies the name of the output library. If not provided, the name from `package.json` will be used.
+
+## Contributing
+
+Any form of contribution is welcome! Please submit PRs or open issues for discussion.
+
+## License
+
+MIT
diff --git a/packages/webpack-plugin/package.json b/packages/webpack-plugin/package.json
new file mode 100644
index 000000000..595faead3
--- /dev/null
+++ b/packages/webpack-plugin/package.json
@@ -0,0 +1,26 @@
+{
+ "name": "@qiankunjs/webpack-plugin",
+ "version": "0.0.1",
+ "description": "",
+ "main": "./dist/cjs/index.js",
+ "module": "./dist/esm/index.js",
+ "scripts": {
+ "build:webpack4": "cd ./tests/webpack4 && npm run build",
+ "build:webpack5": "cd ./tests/webpack5 && npm run build",
+ "test": "npm run build && npm run build:webpack4 && npm run build:webpack5 && vitest",
+ "build": "father build"
+ },
+ "files": [
+ "dist",
+ "src"
+ ],
+ "peerDependencies": {
+ "webpack": "^4.0.0 || ^5.0.0"
+ },
+ "author": "Hermanna",
+ "license": "MIT",
+ "devDependencies": {
+ "@types/webpack-sources": "^3.2.1",
+ "webpack-sources": "^3.2.3"
+ }
+}
diff --git a/packages/webpack-plugin/plugin.test.ts b/packages/webpack-plugin/plugin.test.ts
new file mode 100644
index 000000000..a6534690a
--- /dev/null
+++ b/packages/webpack-plugin/plugin.test.ts
@@ -0,0 +1,24 @@
+import fs from 'fs';
+import path from 'path';
+
+describe('QiankunPlugin', () => {
+ // webpack4
+ it('should work with webpack 4', async () => {
+ // 检查产物
+ const htmlContent = fs.readFileSync(path.join(__dirname, 'tests/webpack4/dist/index.html'), 'utf-8');
+ expect(htmlContent).toContain('