fix: correct entry script identification and webpack version detectio…

packages/webpack-plugin/README-zh.md

@@ -35,6 +35,8 @@ module.exports = {
   plugins: [
     new QiankunPlugin({
       packageName: 'optionalPackageName', // 可选，如果不提供，将使用 package.json 中的名称
+      webpackVersion: '5', // 可选，项目使用的webpack大版本，如果不提供，将默认读取项目package.json里webapck版本号
+      scriptMatchPattern: /<script[^>]*src="app.*\.js"[^>]*><\/script>/g, // 可选，用于匹配要添加entry属性的script标签的正则表达式。如果不提供，默认取html最后一个script标签
     }),
   ],
 };

packages/webpack-plugin/README.md

@@ -35,6 +35,8 @@ module.exports = {
   plugins: [
     new QiankunPlugin({
       packageName: 'optionalPackageName', // Optional, if not provided, the name from package.json will be used
+      webpackVersion: '5', // Optional, specify the major version of webpack being used. If not provided, the version from package.json will be used by default.
+      scriptMatchPattern: /<script[^>]*src="app.*\.js"[^>]*><\/script>/g, // Optional, a regex pattern to match specific script tags for adding the 'entry' attribute.    Defaults to the last script tag if not specified.
     }),
   ],
 };

packages/webpack-plugin/package.json

@@ -6,9 +6,9 @@
   "module": "./dist/esm/index.js",
   "types": "./dist/esm/index.d.ts",
   "scripts": {
-    "build:webpack4": "cd ./tests/webpack4 && npm run build",
-    "build:webpack5": "cd ./tests/webpack5 && npm run build",
-    "test:local": "npm run build && npm run build:webpack4 && npm run build:webpack5 && vitest",
+    "build:webpack4": "cd ./tests/webpack4 && pnpm install && npm run build",
+    "build:webpack5": "cd ./tests/webpack5 && pnpm install && npm run build",
+    "test": "npm run build && npm run build:webpack4 && npm run build:webpack5 && vitest --run",
     "build": "father build"
   },
   "files": ["dist"],

packages/webpack-plugin/src/index.ts

@@ -5,6 +5,8 @@ import { RawSource } from 'webpack-sources';
 
 interface QiankunPluginOptions {
   packageName?: string;
+  webpackVersion?: string;
+  scriptMatchPattern?: RegExp; // 新增可选参数，用于匹配script标签
 }
 
 interface PackageJson {
@@ -15,10 +17,15 @@ interface PackageJson {
 
 class QiankunPlugin {
   private packageName: string;
+  private webpackVersion: string; // 用户指定的webpack版本
+  private scriptMatchPattern: RegExp; // 用户提供的正则表达式
+
   private static packageJson: PackageJson = QiankunPlugin.readPackageJson();
 
   constructor(options: QiankunPluginOptions = {}) {
     this.packageName = options.packageName || QiankunPlugin.packageJson.name || '';
+    this.webpackVersion = options.webpackVersion || QiankunPlugin.getWebpackVersion(); // 使用用户指定的版本或者读取的版本
+    this.scriptMatchPattern = options.scriptMatchPattern || /<script[^>]*src="[^"]+"[^>]*><\/script>/g; // 使用用户提供的正则或默认值
   }
 
   private static readPackageJson(): PackageJson {
@@ -40,16 +47,15 @@ class QiankunPlugin {
   }
 
   private configureWebpackOutput(compiler: Compiler): void {
-    const webpackVersion = QiankunPlugin.getWebpackVersion();
     const webpackCompilerOptions = compiler.options as Configuration & { output: { jsonpFunction?: string } };
-    if (webpackVersion.startsWith('4')) {
+    if (this.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')) {
+    } else if (this.webpackVersion.startsWith('5')) {
       // webpack 5
       webpackCompilerOptions.output.library = {
         name: `${this.packageName}`,
@@ -76,11 +82,10 @@ class QiankunPlugin {
   }
 
   private addEntryAttributeToScripts(htmlString: string): string {
-    const scriptTags = htmlString.match(/<script[^>]*src="[^"]+"[^>]*><\/script>/g) || [];
-    const nonAsyncOrDeferScripts = scriptTags.filter((tag) => !/defer|async/.test(tag));
+    const scriptTags = htmlString.match(this.scriptMatchPattern) || [];
 
-    if (nonAsyncOrDeferScripts.length) {
-      const lastScriptTag = nonAsyncOrDeferScripts[nonAsyncOrDeferScripts.length - 1];
+    if (scriptTags.length) {
+      const lastScriptTag = scriptTags[scriptTags.length - 1];
       const modifiedScriptTag = lastScriptTag.replace('<script', '<script entry');
       return htmlString.replace(lastScriptTag, modifiedScriptTag);
     }

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

@@ -7,5 +7,6 @@
   </head>
   <body>
     <div id="app"></div>
+    <script src="/js/app.12.js"></script>
   </body>
 </html>

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

@@ -13,6 +13,8 @@ module.exports = {
       template: './index.html', // 指定模板文件路径
       filename: 'index.html', // 输出的HTML文件名（默认为index.html）
     }),
-    new QiankunPlugin(),
+    new QiankunPlugin({
+      scriptMatchPattern: /<script[^>]*src="\/js\/app.*.js"[^>]*><\/script>/g,
+    }),
   ],
 };

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

@@ -14,6 +14,8 @@ module.exports = {
       filename: 'index.html', // 输出的HTML文件名（默认为index.html）
       scriptLoading: 'blocking',
     }),
-    new QiankunPlugin(),
+    new QiankunPlugin({
+      webpackVersion: '5',
+    }),
   ],
 };