fix(plugin-webpack): ESM-compatible imports (#4206)

Author: erickzhao

packages/plugin/webpack/src/WebpackConfig.ts

@@ -2,8 +2,10 @@ import path from 'node:path';
 
 import debug from 'debug';
 import HtmlWebpackPlugin from 'html-webpack-plugin';
-import * as webpack from 'webpack';
-import { DefinePlugin, ExternalsPlugin, WebpackPluginInstance } from 'webpack';
+import type * as webpack from 'webpack';
+import webpackPkg from 'webpack';
+
+const { DefinePlugin, ExternalsPlugin } = webpackPkg;
 import { merge as webpackMerge } from 'webpack-merge';
 
 import {
@@ -366,7 +368,7 @@ export default class WebpackConfigGenerator {
             template: entryPoint.html,
             filename: `${entryPoint.name}/index.html`,
             chunks: [entryPoint.name].concat(entryPoint.additionalChunks || []),
-          }) as WebpackPluginInstance,
+          }) as webpack.WebpackPluginInstance,
         );
       }
     }

packages/plugin/webpack/src/WebpackPlugin.ts

@@ -20,7 +20,7 @@ import debug from 'debug';
 import glob from 'fast-glob';
 import fs from 'fs-extra';
 import { PRESET_TIMER } from 'listr2';
-import * as webpack from 'webpack';
+import webpack from 'webpack';
 import WebpackDevServer from 'webpack-dev-server';
 import { merge } from 'webpack-merge';
 
@@ -145,7 +145,7 @@ export default class WebpackPlugin extends PluginBase<WebpackPluginConfig> {
     rendererOptions: WebpackPluginRendererConfig | null,
   ): Promise<webpack.MultiStats | undefined> =>
     new Promise((resolve, reject) => {
-      webpack.webpack(options).run(async (err, stats) => {
+      webpack(options).run(async (err, stats) => {
         if (rendererOptions && rendererOptions.jsonStats) {
           for (const [index, entryStats] of (stats?.stats ?? []).entries()) {
             const name = rendererOptions.entryPoints[index].name;
@@ -639,7 +639,7 @@ the generated files). Instead, it is ${JSON.stringify(pj.main)}`);
 
     const mainConfig = await this.configGenerator.getMainConfig();
     await new Promise((resolve, reject) => {
-      const compiler = webpack.webpack(mainConfig);
+      const compiler = webpack(mainConfig);
       const [onceResolve, onceReject] = once(resolve, reject);
       const cb: WebpackWatchHandler = async (err, stats) => {
         if (tab && stats) {
@@ -741,7 +741,7 @@ the generated files). Instead, it is ${JSON.stringify(pj.main)}`);
       entryConfig.stats = 'none';
     }
 
-    const compiler = webpack.webpack(configs);
+    const compiler = webpack(configs);
 
     const promises = preloadPlugins.map((preloadPlugin) => {
       return new Promise((resolve, reject) => {

tools/test-dist.ts

@@ -1,11 +1,16 @@
 import * as path from 'node:path';
+import { pathToFileURL } from 'node:url';
 
 import chalk from 'chalk';
 import fs from 'fs-extra';
 
 const BASE_DIR = path.resolve(import.meta.dirname, '..');
 const PACKAGES_DIR = path.resolve(BASE_DIR, 'packages');
 
+// Packages whose entry points have top-level side effects (CLI scripts)
+// that cannot be safely imported in a test context.
+const SKIP_IMPORT = new Set(['create-electron-app']);
+
 (async () => {
   const dirsToCheck: string[] = [];
 
@@ -46,6 +51,17 @@ const PACKAGES_DIR = path.resolve(BASE_DIR, 'packages');
         chalk.red(`Main entry not found (${main})`),
       );
       bad = true;
+    } else if (!SKIP_IMPORT.has(pj.name)) {
+      try {
+        await import(pathToFileURL(path.resolve(dir, main)).href);
+      } catch (err: unknown) {
+        const message = err instanceof Error ? err.message : String(err);
+        console.error(
+          `${chalk.cyan(`[${pj.name}]`)}:`,
+          chalk.red(`Failed to import main entry (${main}): ${message}`),
+        );
+        bad = true;
+      }
     }
     if (!typings || !(await fs.pathExists(path.resolve(dir, typings)))) {
       console.error(