feat: split server chunk

.changeset/cyan-emus-fail.md

@@ -0,0 +1,7 @@
+---
+'@ice/bundles': patch
+'@ice/app': patch
+---
+
+@ice/app: align the output result with the former esbuild
+@ice/bundles: export more webpack internal modules

.changeset/forty-lamps-crash.md

@@ -0,0 +1,7 @@
+---
+'@ice/bundles': patch
+'@ice/app': patch
+---
+
+@ice/app: remove unused deps and import them from @ice/bundles
+@ice/bundles: compile tsconfig-paths-webpack-plugin

.changeset/khaki-maps-punch.md

@@ -0,0 +1,5 @@
+---
+'@ice/app': patch
+---
+
+rebase releast/next

.changeset/neat-queens-prove.md

@@ -0,0 +1,7 @@
+---
+'@ice/app': patch
+---
+
+feat: minify css file;
+feat: change minifier from terser to esbuildMinifier.
+feat: support config minify option

.changeset/rude-games-nail.md

@@ -0,0 +1,8 @@
+---
+'@ice/app': patch
+---
+
+- feat: change transformInclude to array
+- fix: only treat .js as jsx
+- feat: support customize webpack.module.rule
+- feat: support handle assets

.changeset/seven-rice-film.md

@@ -0,0 +1,5 @@
+---
+'@ice/app': patch
+---
+
+refactro: reuse webpackConfig

.changeset/spotty-otters-travel.md

@@ -0,0 +1,5 @@
+---
+'@ice/app': minor
+---
+
+support split server bundle

.changeset/tidy-pets-know.md

@@ -0,0 +1,8 @@
+---
+'@ice/webpack-config': patch
+'@ice/shared-config': patch
+'@ice/app': patch
+---
+
+fix: use @ice/bundles instead of import webpack directly.
+feat: support pass definitions for provide plugin.

packages/bundles/package.json

@@ -118,3 +118,4 @@
     "registry": "https://registry.npmjs.org/"
   }
 }
+

packages/bundles/webpack/bundle.js

@@ -10,6 +10,11 @@ module.exports = {
   SingleEntryPlugin: require('webpack/lib/SingleEntryPlugin'),
   FetchCompileAsyncWasmPlugin: require('webpack/lib/web/FetchCompileAsyncWasmPlugin'),
   FetchCompileWasmPlugin: require('webpack/lib/web/FetchCompileWasmPlugin'),
+  JavascriptModulesPlugin: require('webpack/lib/javascript/JavascriptModulesPlugin'),
+  StartupChunkDependenciesPlugin: require('webpack/lib/runtime/StartupChunkDependenciesPlugin'),
+  StartupHelpers: require('webpack/lib/javascript/StartupHelpers'),
+  compileBooleanMatcher: require('webpack/lib/util/compileBooleanMatcher'),
+  identifier: require('webpack/lib/util/identifier'),
   StringXor: require('webpack/lib/util/StringXor'),
   NormalModule: require('webpack/lib/NormalModule'),
   EntryDependency: require('webpack/lib/dependencies/EntryDependency'),

packages/bundles/webpack/packages/JavascriptModulesPlugin.js

@@ -0,0 +1 @@
+module.exports = require('./bundle').JavascriptModulesPlugin;

packages/bundles/webpack/packages/StartupChunkDependenciesPlugin.js

@@ -0,0 +1 @@
+module.exports = require('./bundle').StartupChunkDependenciesPlugin;

packages/bundles/webpack/packages/StartupHelpers.js

@@ -0,0 +1 @@
+module.exports = require('./bundle').StartupHelpers;

packages/bundles/webpack/packages/compileBooleanMatcher.js

@@ -0,0 +1 @@
+module.exports = require('./bundle').compileBooleanMatcher;

packages/bundles/webpack/packages/identifier.js

@@ -0,0 +1 @@
+module.exports = require('./bundle').identifier;

packages/ice/package.json

@@ -108,4 +108,4 @@
   "publishConfig": {
     "access": "public"
   }
-}
+}

packages/ice/src/requireHook.ts

@@ -28,10 +28,24 @@ export function getHookFiles() {
     'webpack/lib/ExternalsPlugin',
     'webpack/lib/web/FetchCompileAsyncWasmPlugin',
     'webpack/lib/web/FetchCompileWasmPlugin',
+    'webpack/lib/runtime/StartupChunkDependenciesPlugin',
+    'webpack/lib/javascript/JavascriptModulesPlugin',
+    'webpack/lib/javascript/StartupHelpers',
+    'webpack/lib/util/identifier',
+    'webpack/lib/util/compileBooleanMatcher',
   ];
   const webpackDir = path.join(require.resolve('@ice/bundles/compiled/webpack'), '../');
   const pluginMap = webpackPlugins.map((pluginPath) => {
-    return [pluginPath, pluginPath.replace(/^webpack\/lib\/((web|node|optimize|webworker)\/)?/, webpackDir)];
+    return [
+      pluginPath,
+      pluginPath.replace(/^webpack\/lib\/((web|node|optimize|webworker|runtime|javascript|util)\/)?/, webpackDir),
+    ];
+  });
+  const pluginMapWithJs = webpackPlugins.map((pluginPath) => {
+    return [
+      `${pluginPath}.js`,
+      pluginPath.replace(/^webpack\/lib\/((web|node|optimize|webworker|runtime|javascript|util)\/)?/, webpackDir),
+    ];
   });
 
   return [
@@ -42,6 +56,7 @@ export function getHookFiles() {
     ['webpack/hot/only-dev-server', `${webpackDir}hot/only-dev-server`],
     ['webpack/hot/emitter', `${webpackDir}hot/emitter`],
     ...pluginMap,
+    ...pluginMapWithJs,
   ];
 }
 
@@ -52,12 +67,7 @@ function hijackWebpack() {
   // eslint-disable-next-line global-require
   const mod = require('module');
   const resolveFilename = mod._resolveFilename;
-  mod._resolveFilename = function (
-    request: string,
-    parent: any,
-    isMain: boolean,
-    options: any,
-  ) {
+  mod._resolveFilename = function (request: string, parent: any, isMain: boolean, options: any) {
     const hookResolved = hookPropertyMap.get(request);
     if (hookResolved) request = hookResolved;
     return resolveFilename.call(mod, request, parent, isMain, options);

packages/ice/src/service/serverCompiler.ts

@@ -27,6 +27,8 @@ import getCSSModuleIdent from '../utils/getCSSModuleIdent.js';
 import { scanImports } from './analyze.js';
 import type { PreBundleDepsMetaData } from './preBundleDeps.js';
 import preBundleDeps from './preBundleDeps.js';
+import { WebpackServerCompiler } from './webpackServerCompiler/compiler.js';
+import VirualAssetPlugin from './webpackServerCompiler/virtualAssetPlugin.js';
 
 const logger = createLogger('server-compiler');
 
@@ -100,7 +102,6 @@ export function createServerCompiler(options: Options) {
   const externals = task.config?.externals || {};
   const sourceMap = task.config?.sourceMap;
   const dev = command === 'start';
-
   // Filter empty alias.
   const { ignores, alias } = filterAlias(task.config?.alias || {});
 
@@ -144,6 +145,7 @@ export function createServerCompiler(options: Options) {
       redirectImports,
       getRoutesFile,
     }, 'esbuild', { isServer });
+
     const define = getRuntimeDefination(task.config?.define || {}, runtimeDefineVars, transformEnv);
     if (preBundle) {
       const plugins = [
@@ -169,7 +171,7 @@ export function createServerCompiler(options: Options) {
         plugins,
       });
     }
-
+    server.bundler = server.bundler ?? 'esbuild';
     const format = customBuildOptions?.format || 'esm';
 
     let buildOptions: esbuild.BuildOptions = {
@@ -236,35 +238,52 @@ export function createServerCompiler(options: Options) {
     }
 
     const startTime = new Date().getTime();
-    logger.debug('[esbuild]', `start compile for: ${JSON.stringify(buildOptions.entryPoints)}`);
+    logger.debug(`[${server.bundler}]`, `start compile for: ${JSON.stringify(buildOptions.entryPoints)}`);
 
     try {
-      let esbuildResult: esbuild.BuildResult;
+      let bundleResult: any;
       let context: esbuild.BuildContext;
       if (dev) {
         context = await esbuild.context(buildOptions);
-        esbuildResult = await context.rebuild();
+        bundleResult = await context.rebuild();
       } else {
-        esbuildResult = await esbuild.build(buildOptions);
+        switch (server.bundler) {
+          case 'webpack':
+            const webpackServerCompiler = new WebpackServerCompiler({
+              ...buildOptions,
+              externals,
+              compileIncludes: task.config.compileIncludes,
+              plugins: [compilationInfo && new VirualAssetPlugin({ compilationInfo, rootDir })],
+              rootDir,
+              userServerConfig: server,
+              runtimeDefineVars,
+            });
+            bundleResult = (await webpackServerCompiler.build())?.compilation;
+            break;
+          case 'esbuild':
+          default:
+            bundleResult = await esbuild.build(buildOptions);
+            break;
+        }
       }
 
-      logger.debug('[esbuild]', `time cost: ${new Date().getTime() - startTime}ms`);
+      logger.debug(`[${server.bundler}]`, `time cost: ${new Date().getTime() - startTime}ms`);
 
       const esm = server?.format === 'esm';
       const outJSExtension = esm ? '.mjs' : '.cjs';
       const serverEntry = path.join(rootDir, task.config.outputDir, SERVER_OUTPUT_DIR, `index${outJSExtension}`);
 
-      if (removeOutputs && esbuildResult.metafile) {
+      if (removeOutputs && bundleResult.metafile) {
         // build/server/a.mjs -> a.mjs
-        const currentOutputFiles = Object.keys(esbuildResult.metafile.outputs)
+        const currentOutputFiles = Object.keys(bundleResult.metafile.outputs)
           .map(output => output.replace(formatPath(`${path.relative(rootDir, buildOptions.outdir)}${path.sep}`), ''));
         const allOutputFiles = fg.sync('**', { cwd: buildOptions.outdir });
         const outdatedFiles = difference(allOutputFiles, currentOutputFiles);
         outdatedFiles.forEach(outdatedFile => fse.removeSync(path.join(buildOptions.outdir, outdatedFile)));
       }
 
       return {
-        ...esbuildResult,
+        ...bundleResult,
         context,
         serverEntry,
       };

packages/ice/src/service/webpackServerCompiler/compiler.ts

@@ -0,0 +1,116 @@
+import path from 'path';
+import { fileURLToPath } from 'url';
+import webpack from '@ice/bundles/compiled/webpack/index.js';
+import { getWebpackConfig } from '@ice/webpack-config';
+import type { UserConfig } from '../../types/userConfig.js';
+import { logger } from '../../utils/logger.js';
+import { getExpandedEnvs } from '../../utils/runtimeEnv.js';
+import { RUNTIME_TMP_DIR } from '../../constant.js';
+
+const _dirname = typeof __dirname !== 'undefined' ? __dirname : path.dirname(fileURLToPath(import.meta.url));
+
+export class WebpackServerCompiler {
+  private options;
+
+  constructor(options: any) {
+    this.options = options;
+  }
+
+  private async createWebpackConfig(options: {
+    userServerConfig: UserConfig['server'];
+    rootDir: string;
+    [key: string]: any;
+  }) {
+    const { userServerConfig } = options;
+    const { webpackConfig = {} } = userServerConfig;
+    const definitions = await this.getEsbuildInject();
+    return getWebpackConfig({
+      config: {
+        mode: 'production',
+        entry: options.entryPoints,
+        alias: options.alias,
+        webpackTarget: 'node12.20',
+        externalsPresets: {
+          node: false,
+        },
+        output: {
+          filename: `[name].${options.format === 'esm' ? 'mjs' : 'cjs'}`,
+          path: options.outdir,
+          // align the output with former esbuild
+          chunkFormat: false,
+          clean: true,
+          library: {
+            type: 'commonjs2',
+          },
+          ...(webpackConfig.output as any),
+        },
+        plugins: [...options.plugins, ...(webpackConfig.plugins || [])] as any,
+        externals: options.externals,
+        outputDir: options.outdir,
+        enableCache: false,
+        loaders: [
+          // Use esbuild to compile JavaScript & TypeScript
+          {
+            //   // Match `.js`, `.jsx`, `.ts` or `.tsx` files
+            test: /\.m?[jt]sx?$/,
+            use: [path.resolve(_dirname, 'removeMagicString.js')],
+          },
+          ...(webpackConfig.module?.rules || []),
+        ],
+        useDevServer: false,
+        analyzer: false,
+        assetsManifest: false,
+        define: options.define,
+        optimization: { ...webpackConfig.optimization } as any,
+        minify: options.minify,
+        compileIncludes: webpackConfig.transformInclude,
+        swcOptions: {
+          compilationConfig: {
+            jsc: {
+              externalHelpers: false,
+              transform: {
+                react: {
+                  runtime: options.jsx,
+                  importSource: '@ice/runtime/react',
+                },
+              },
+            },
+          },
+        },
+        definitions,
+      },
+      rootDir: options.rootDir,
+      webpack: webpack as any,
+      runtimeTmpDir: RUNTIME_TMP_DIR,
+      userConfigHash: '',
+      getExpandedEnvs,
+      isServer: true,
+    });
+  }
+
+  private async getEsbuildInject(): Promise<Record<string, string | string[]>> {
+    const provideRecord = {};
+    const allInjects = await Promise.all(this.options.inject.map((inj) => import(inj)));
+    allInjects.forEach((injs, index) => {
+      Object.keys(injs).forEach((key) => {
+        provideRecord[key] = [this.options.inject[index], key];
+      });
+    });
+    return provideRecord;
+  }
+
+  async build(): Promise<any> {
+    const config = await this.createWebpackConfig(this.options);
+    return new Promise((resolve, reject) => {
+      webpack(config as any, (err, stats) => {
+        if (err || stats?.hasErrors?.()) {
+          logger.error(err || stats.toString());
+          reject(err || stats.toString());
+          process.exit(1);
+        } else {
+          resolve(stats);
+        }
+      });
+    });
+  }
+}

packages/ice/src/service/webpackServerCompiler/removeMagicString.ts

@@ -0,0 +1,9 @@
+export default function (source: string) {
+  const result = source.replace(
+    /webpackChunkName:\s*["'][^"']+["']/g,
+    'webpackMode: "eager"',
+  );
+
+  // Return the modified source
+  return result;
+}