feat: webpack plugin

.changeset/modern-kiwis-tap.md

@@ -0,0 +1,5 @@
+---
+"@qiankunjs/webpack-plugin": patch
+---
+
+feat: introduce qiankun 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;
   },

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/",

packages/webpack-plugin/.fatherrc.js

@@ -0,0 +1 @@
+export { default } from '../../.fatherrc.cjs';

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

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

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"
+  }
+}

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('<script entry'); // 检查是否正确标记了 entry js
+
+    const jsChunkContent = fs.readFileSync(path.join(__dirname, 'tests/webpack4/dist/bundle.js'), 'utf-8');
+    expect(jsChunkContent).toContain('window.'); // 检查是否包含了 window. 关键字
+  });
+
+  // webpack5
+  it('should work with webpack 5', async () => {
+    // 检查产物
+    const htmlContent = fs.readFileSync(path.join(__dirname, 'tests/webpack5/dist/index.html'), 'utf-8');
+    expect(htmlContent).toContain('<script entry'); // 检查是否正确标记了 entry js
+
+    const jsChunkContent = fs.readFileSync(path.join(__dirname, 'tests/webpack5/dist/bundle.js'), 'utf-8');
+    expect(jsChunkContent).toContain('window.'); // 检查是否包含了 window. 关键字
+  });
+});

packages/webpack-plugin/src/index.ts

@@ -0,0 +1,91 @@
+import fs from 'fs';
+import path from 'path';
+import type { Compiler, Configuration, Compilation } from 'webpack';
+import { RawSource } from 'webpack-sources';
+
+interface QiankunPluginOptions {
+  packageName?: string;
+}
+
+interface PackageJson {
+  name?: string;
+  dependencies?: Record<string, string>;
+  devDependencies?: Record<string, string>;
+}
+
+class QiankunPlugin {
+  private packageName: string;
+  private static packageJson: PackageJson = QiankunPlugin.readPackageJson();
+
+  constructor(options: QiankunPluginOptions = {}) {
+    this.packageName = options.packageName || QiankunPlugin.packageJson.name || '';
+  }
+
+  private static readPackageJson(): PackageJson {
+    const projectRoot: string = process.cwd();
+    const packageJsonPath: string = path.join(projectRoot, 'package.json');
+    return JSON.parse(fs.readFileSync(packageJsonPath, 'utf-8')) as PackageJson;
+  }
+
+  private static getWebpackVersion(): string {
+    return QiankunPlugin.packageJson.dependencies?.webpack || QiankunPlugin.packageJson.devDependencies?.webpack || '';
+  }
+
+  apply(compiler: Compiler): void {
+    this.configureWebpackOutput(compiler);
+    compiler.hooks.emit.tapAsync('QiankunPlugin', (compilation: Compilation, callback: () => void) => {
+      this.modifyHtmlAssets(compilation);
+      callback();
+    });
+  }
+
+  private configureWebpackOutput(compiler: Compiler): void {
+    const webpackVersion = QiankunPlugin.getWebpackVersion();
+    const webpackCompilerOptions = compiler.options as Configuration & { output: { jsonpFunction?: string } };
+    if (webpackVersion.startsWith('4')) {
+      // webpack 4
+      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}`;
+    } else if (webpackVersion.startsWith('5')) {
+      // webpack 5
+      webpackCompilerOptions.output.library = {
+        name: `${this.packageName}`,
+        type: 'window',
+      };
+      webpackCompilerOptions.output.libraryTarget = 'window';
+      webpackCompilerOptions.output.jsonpFunction = `webpackJsonp_${this.packageName}`;
+      webpackCompilerOptions.output.globalObject = 'window';
+      webpackCompilerOptions.output.chunkLoadingGlobal = `webpackJsonp_${this.packageName}`;
+    }
+  }
+
+  private modifyHtmlAssets(compilation: Compilation): void {
+    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');
+
+        const modifiedHtml = this.addEntryAttributeToScripts(htmlString);
+        // eslint-disable-next-line
+        compilation.assets[filename] = new RawSource(modifiedHtml) as any;
+      }
+    });
+  }
+
+  private addEntryAttributeToScripts(htmlString: string): string {
+    const scriptTags = htmlString.match(/<script[^>]*src="[^"]+"[^>]*><\/script>/g) || [];
+    const nonAsyncOrDeferScripts = scriptTags.filter((tag) => !/defer|async/.test(tag));
+
+    if (nonAsyncOrDeferScripts.length) {
+      const lastScriptTag = nonAsyncOrDeferScripts[nonAsyncOrDeferScripts.length - 1];
+      const modifiedScriptTag = lastScriptTag.replace('<script', '<script entry');
+      return htmlString.replace(lastScriptTag, modifiedScriptTag);
+    }
+    return htmlString;
+  }
+}
+
+module.exports = QiankunPlugin;

packages/webpack-plugin/tests/webpack4/index.html

@@ -0,0 +1,11 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Webpack Test</title>
+  </head>
+  <body>
+    <div id="app"></div>
+  </body>
+</html>

packages/webpack-plugin/tests/webpack4/index.js

@@ -0,0 +1 @@
+console.log('Hello from test demo!');

packages/webpack-plugin/tests/webpack4/package.json

@@ -0,0 +1,18 @@
+{
+  "name": "webpack4",
+  "version": "1.0.0",
+  "description": "",
+  "main": "index.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "build": "webpack"
+  },
+  "keywords": [],
+  "author": "",
+  "license": "ISC",
+  "devDependencies": {
+    "html-webpack-plugin": "^4.5.2",
+    "webpack": "4",
+    "webpack-cli": "3"
+  }
+}

packages/webpack-plugin/tests/webpack4/webpack.config.js

@@ -0,0 +1,18 @@
+const path = require('path');
+const QiankunPlugin = require('../../dist/cjs');
+const HtmlWebpackPlugin = require('html-webpack-plugin');
+
+module.exports = {
+  entry: './index.js',
+  output: {
+    filename: 'bundle.js',
+    path: path.resolve(__dirname, 'dist'),
+  },
+  plugins: [
+    new HtmlWebpackPlugin({
+      template: './index.html', // 指定模板文件路径
+      filename: 'index.html', // 输出的HTML文件名（默认为index.html）
+    }),
+    new QiankunPlugin(),
+  ],
+};

packages/webpack-plugin/tests/webpack5/index.html

@@ -0,0 +1,11 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Webpack Test</title>
+  </head>
+  <body>
+    <div id="app"></div>
+  </body>
+</html>

packages/webpack-plugin/tests/webpack5/index.js

@@ -0,0 +1 @@
+console.log('Hello from test demo!');

packages/webpack-plugin/tests/webpack5/package.json

@@ -0,0 +1,18 @@
+{
+  "name": "webpack5",
+  "version": "1.0.0",
+  "description": "",
+  "main": "index.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "build": "webpack"
+  },
+  "keywords": [],
+  "author": "",
+  "license": "ISC",
+  "devDependencies": {
+    "html-webpack-plugin": "^5.5.3",
+    "webpack": "5",
+    "webpack-cli": "4"
+  }
+}