feat: webpack plugin

examples/main/index.html

@@ -36,7 +36,7 @@ <h1>QianKun</h1>
     </header>
     <div class="mainapp-main">
       <!-- 侧边栏 -->
-      <ul class="mainapp-sidemenu">
+      <ul class="mainapp-sidemenu">   
         <li data-value='react16'>React16</li>
         <li data-value='react15'>React15</li>
       </ul>

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',

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;
   },

packages/webpack-plugin/.fatherrc.js

@@ -0,0 +1,6 @@
+import cfg from '../../.fatherrc.cjs';
+
+export default {
+  umd: {},
+  ...cfg,
+};

packages/webpack-plugin/README.md

@@ -0,0 +1,54 @@
+# @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
+

packages/webpack-plugin/package.json

@@ -0,0 +1,24 @@
+{
+  "name": "@qiankunjs/webpack-plugin",
+  "version": "0.0.1",
+  "description": "",
+  "main": "./dist/cjs/index.js",
+  "module": "./dist/esm/index.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "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"
+  }
+}

packages/webpack-plugin/src/index.ts

@@ -0,0 +1,56 @@
+import fs from 'fs';
+import path from 'path';
+import { Compiler, Configuration } from 'webpack';
+import { RawSource } from 'webpack-sources';
+
+const projectRoot: string = process.cwd();
+const packageJsonPath: string = path.join(projectRoot, 'package.json');
+const packageJson: { name?: string } = JSON.parse(fs.readFileSync(packageJsonPath, 'utf-8'));
+
+interface QiankunPluginOptions {
+  packageName?: string;
+}
+
+class QiankunPlugin {
+  private packageName: string;
+
+  constructor(options: QiankunPluginOptions = {}) {
+    this.packageName = options.packageName || packageJson.name || '';
+  }
+
+  apply(compiler: Compiler): void {
+    const webpackCompilerOptions = compiler.options as Configuration & { output: { jsonpFunction?: string } };
+    webpackCompilerOptions.output.library = `${this.packageName}`;
+    webpackCompilerOptions.output.libraryTarget = 'window';
+    webpackCompilerOptions.output.jsonpFunction = `webpackJsonp_${this.packageName}`;
+    webpackCompilerOptions.output.globalObject = 'window';
+    webpackCompilerOptions.output.chunkLoadingGlobal = `webpackJsonp_${this.packageName}`;
+
+    compiler.hooks.emit.tapAsync('QiankunPlugin', (compilation, callback) => {
+      Object.keys(compilation.assets).forEach(filename => {
+        if (filename.endsWith('.html')) {
+          const htmlSource = compilation.assets[filename].source();
+          const htmlString = typeof htmlSource === 'string' ? htmlSource : htmlSource.toString('utf-8');
+
+          // 找到所有的 <script> 标签
+          const scriptTags = htmlString.match(/<script[^>]*src="[^"]+"[^>]*><\/script>/g) || [];
+          // 筛选出不包含 defer 和 async 属性的标签
+          const nonAsyncOrDeferScripts = scriptTags.filter(tag => !(/defer|async/.test(tag)));
+
+          if (nonAsyncOrDeferScripts.length) {
+            // 获取最后一个 <script> 标签
+            const lastScriptTag = nonAsyncOrDeferScripts[nonAsyncOrDeferScripts.length - 1];
+            // 添加 entry 属性
+            const modifiedScriptTag = lastScriptTag.replace('<script', '<script entry');
+            const modifiedHtml = htmlString.replace(lastScriptTag, modifiedScriptTag);
+            compilation.assets[filename] = new RawSource(modifiedHtml) as any;
+          }
+        }
+      });
+      callback();
+    });
+  }
+}
+
+module.exports = QiankunPlugin;
+

packages/webpack-plugin/tsconfig.json

@@ -0,0 +1,3 @@
+{
+  "extends": "../../tsconfig.json"
+}