Rspack

packages/rzpack/src/cli.ts

@@ -2,11 +2,9 @@
 import { cac } from 'cac'
 import { fileExists, logError, pathResolve } from 'rzpack-utils'
 import type { BuildOptions, RzpackConfigs, ServerOptions } from '.'
-import runBuild from './build'
-import { RzpackContext } from './configs'
 import { NAME, VERSION } from './constant'
-import runPreview from './preview'
-import runServer from './server'
+import { RzpackContext } from './ctx'
+import { runWebpackBuild, runWebpackPreview, runWebpackServer } from './webpack'
 
 export const rzpack = new RzpackContext()
 
@@ -28,13 +26,12 @@ cli
   .option('--ui', '[boolean] startup Rzpack UI')
   .action(async (_: string, options: ServerOptions) => {
     const { c, m, mode, ui = true, config, host, port, open } = options ?? {}
-    rzpack.mode = m ?? mode ?? 'development'
-    process.env.NODE_ENV = rzpack.mode
+    process.env.NODE_ENV = m ?? mode ?? 'development'
     rzpack.webpackChain.devServer.host(host).port(port).open(open)
     try {
       const configs: RzpackConfigs = rzpack.loadConfigFile(c ?? config)
       await rzpack.configs(configs)
-      runServer(ui, configs?.proxyFile)
+      runWebpackServer(ui, configs?.proxyFile)
     } catch (error) {
       logError(error)
     }
@@ -56,8 +53,7 @@ cli
       bundleSize,
       bundleTime,
     } = options ?? {}
-    rzpack.mode = m ?? mode ?? 'production'
-    process.env.NODE_ENV = rzpack.mode
+    process.env.NODE_ENV = m ?? mode ?? 'production'
     rzpack.bundleSize = bundleSize ?? false
     rzpack.bundleTime = bundleTime ?? false
     try {
@@ -66,7 +62,7 @@ cli
         configs.output = outDir
       }
       await rzpack.configs(configs)
-      runBuild(!rzpack.bundleTime)
+      runWebpackBuild(!rzpack.bundleTime)
     } catch (error) {
       logError(error)
     }
@@ -78,8 +74,7 @@ cli
   .option('--outDir <dir>', '[string] output directory (default: dist)')
   .action(async (options: BuildOptions) => {
     const { c, m, mode, config, outDir = 'dist' } = options ?? {}
-    rzpack.mode = m ?? mode ?? 'production'
-    process.env.NODE_ENV = rzpack.mode
+    process.env.NODE_ENV = m ?? mode ?? 'production'
 
     const configs = rzpack.loadConfigFile(c ?? config)
     if (!configs?.output) {
@@ -93,10 +88,10 @@ cli
     let isPreview: boolean = fileExists(fullPath)
     if (!isPreview) {
       await rzpack.configs(configs)
-      isPreview = await runBuild(false)
+      isPreview = await runWebpackBuild(false)
     }
 
-    runPreview(dir)
+    runWebpackPreview(dir)
   })
 
 cli.help()

packages/rzpack/src/configs/index.ts → packages/rzpack/src/ctx.ts

@@ -9,16 +9,9 @@ import {
 import { bundleTsFile } from 'rzpack-utils'
 import type { Configuration } from 'webpack'
 import WebpackChain from 'webpack-chain'
-import type { RzpackConfigs, RzpackWebpackChain, Yagt } from '..'
-import resolveAssets from '../assets'
-import { DEFAULT_CONFIG } from '../constant'
-import resolvePlugins from '../plugins'
-import resolveAlias from './alias'
-import resolveEntry from './entry'
-import resolveExtensions from './extensions'
-import resolveLazyCompilation from './lazyCompilation'
-import resolveMinimizer from './minimizer'
-import resolveOutput from './output'
+import type { RzpackConfigs, RzpackWebpackChain, Yagt } from '.'
+import { DEFAULT_CONFIG } from './constant'
+import { loadWebpackConfigs } from './webpack'
 
 export interface RzpackContextConfigs extends Configuration {
   network?: string
@@ -53,7 +46,6 @@ export const getBuildTmpFilePath = (filename: string) => {
 
 export class RzpackContext {
   public readonly webpackChain: WebpackChain
-  public mode: 'development' | 'production'
   public cache: boolean
   public bundleSize: boolean
   public bundleTime: boolean
@@ -70,9 +62,9 @@ export class RzpackContext {
     return this.webpackChain.get(key)
   }
   loadConfigFile(configFilePath?: string): RzpackConfigs {
-    let configFile
-    let configFileName
-    loadEnv(this.mode)
+    let configFile: string
+    let configFileName: string
+    loadEnv(process.env.NODE_ENV)
     loadEnv()
 
     if (configFilePath) {
@@ -105,33 +97,18 @@ export class RzpackContext {
   async configs(configs: RzpackConfigs) {
     if (typeof configs === 'object') {
       const {
-        entry,
-        output,
-        assets,
         cache = true,
-        publicPath = DEFAULT_CONFIG.STATIC_DIR,
         webpackChain: resolveWebpackChain,
         server,
-        lazyCompilation,
         yagt,
       } = configs
       this.cache = cache
       this.yagt = yagt
-      resolveEntry(this.webpackChain, entry)
-      resolveOutput(this.webpackChain, output)
-      resolveAlias(this.webpackChain)
-      resolveExtensions(this.webpackChain)
-      resolveAssets(this.webpackChain, { ...configs, publicPath })
-      resolveLazyCompilation(this.webpackChain, lazyCompilation)
-      await resolvePlugins(this.webpackChain, { ...configs, publicPath })
-      if (this.mode === 'production') {
-        resolveMinimizer(this.webpackChain, assets?.jsxTools, assets?.imageMini)
-      }
-
+      await loadWebpackConfigs(this.webpackChain, configs)
       const { network, local, port } = await getNetwork(
         server?.port as unknown as number,
       )
-      if (this.mode === 'development') {
+      if (process.env.NODE_ENV === 'development') {
         this.set('network', network)
         this.set('local', local)
         this.set('port', port)
@@ -148,7 +125,7 @@ export class RzpackContext {
     } else {
       console.log(logError('配置文件配置有误，请导出一个函数或对象'))
     }
-    this.webpackChain.mode(this.mode)
+    this.webpackChain.mode(process.env.NODE_ENV as 'development' | 'production')
   }
   toConfig() {
     return this.webpackChain.toConfig() as unknown as RzpackContextConfigs

packages/rzpack/src/index.ts

@@ -1,12 +1,12 @@
 import type HtmlWebpackPlugin from 'html-webpack-plugin'
 import type WebpackChain from 'webpack-chain'
 import type { Configuration as WebpackDevServerConfiguration } from 'webpack-dev-server'
-import type { RzpackAssets } from './assets'
-import type { LazyCompilationOptions } from './configs/lazyCompilation'
-import type { Output } from './configs/output'
-import type { MillionOptions } from './plugins/million-webpack-plugin'
-import type { ModuleFederationPluginOptions } from './plugins/module-federation-plugin'
-import type { BuildInfoWebpackPluginOptions } from './plugins/unplugin-build-info'
+import type { RzpackAssets } from './webpack/assets'
+import type { LazyCompilationOptions } from './webpack/configs/lazyCompilation'
+import type { Output } from './webpack/configs/output'
+import type { MillionOptions } from './webpack/plugins/million-webpack-plugin'
+import type { ModuleFederationPluginOptions } from './webpack/plugins/module-federation-plugin'
+import type { BuildInfoWebpackPluginOptions } from './webpack/plugins/unplugin-build-info'
 
 interface CLIOptions {
   '--'?: string[]

packages/rzpack/src/assets/css.ts → packages/rzpack/src/webpack/assets/css.ts

@@ -8,9 +8,9 @@ import {
   requireResolve,
 } from 'rzpack-utils'
 import type WebpackChain from 'webpack-chain'
-import { rzpack } from '../cli'
-import { getBuildTmpFilePath } from '../configs'
-import type { LessVars, RzpackConfigs } from './../index'
+import { rzpack } from '../../cli'
+import { getBuildTmpFilePath } from '../../ctx'
+import type { LessVars, RzpackConfigs } from '../../index'
 
 /**
  * 应用公共css loader
@@ -21,7 +21,7 @@ const applyCommonLoader = (
   rule: WebpackChain.Rule<WebpackChain.Rule<WebpackChain.Module>>,
   cssScoped?: boolean,
 ) => {
-  if (rzpack.mode === 'development') {
+  if (process.env.NODE_ENV === 'development') {
     rule.use('style-loader').loader(requireResolve('style-loader'))
   } else {
     rule.use('mini-css-extract-loader').loader(MiniCssExtractPlugin.loader)
@@ -112,7 +112,7 @@ const useAntdTheme = (antdTheme: LessVars) => {
     }
     let antdVersion = getPackageVersion('antd')
     if (antdVersion < 5 && antdTheme.vars) {
-      antdVersion = parseInt(antdVersion)
+      antdVersion = Number.parseInt(antdVersion)
     }
 
     // 直接定义的变量优先级高于变量文件

packages/rzpack/src/assets/index.ts → packages/rzpack/src/webpack/assets/index.ts

@@ -1,7 +1,7 @@
-import { FilterFn } from 'image-minimizer-webpack-plugin'
+import type { FilterFn } from 'image-minimizer-webpack-plugin'
 import type WebpackChain from 'webpack-chain'
-import type { JSX_TOOLS } from '../'
-import type { RzpackConfigs } from './../index'
+import type { JSX_TOOLS } from '../../'
+import type { RzpackConfigs } from '../../index'
 import css from './css'
 import font from './font'
 import image from './image'
@@ -16,11 +16,9 @@ export interface RzpackAssets {
   imageMini?: boolean | FilterFn
 }
 
-const resolveAssets = (webpackChain: WebpackChain, options: RzpackConfigs) => {
+export default (webpackChain: WebpackChain, options: RzpackConfigs) => {
   jsx(webpackChain, options?.assets)
   font(webpackChain)
   image(webpackChain)
   css(webpackChain, options)
 }
-
-export default resolveAssets

packages/rzpack/src/assets/jsx/index.ts → packages/rzpack/src/webpack/assets/jsx/index.ts

@@ -1,11 +1,11 @@
 import { requireResolve } from 'rzpack-utils'
 import type WebpackChain from 'webpack-chain'
-import { JSX_TOOLS } from '../..'
-import { RzpackAssets } from './../index'
+import { JSX_TOOLS } from '../../..'
+import type { RzpackAssets } from '../index'
 import esbuild from './esbuild'
 import swc from './swc'
 
-const jsx = (webpackChain: WebpackChain, assets: RzpackAssets) => {
+export default (webpackChain: WebpackChain, assets: RzpackAssets) => {
   const { jsxTools = JSX_TOOLS.ESBUILD, cssScoped } = assets ?? {}
   const transformTools = {
     [JSX_TOOLS.ESBUILD]: esbuild,
@@ -20,5 +20,3 @@ const jsx = (webpackChain: WebpackChain, assets: RzpackAssets) => {
       .end()
   }
 }
-
-export default jsx

packages/rzpack/src/assets/jsx/swc.ts → packages/rzpack/src/webpack/assets/jsx/swc.ts

@@ -1,6 +1,6 @@
 import { requireResolve } from 'rzpack-utils'
 import type WebpackChain from 'webpack-chain'
-import { rzpack } from '../../cli'
+import { rzpack } from '../../../cli'
 
 export default (webpackChain: WebpackChain) => {
   return webpackChain.module
@@ -23,12 +23,12 @@ export default (webpackChain: WebpackChain) => {
         transform: {
           react: {
             runtime: 'automatic',
-            development: rzpack.mode === 'development',
+            development: process.env.NODE_ENV === 'development',
             useBuiltins: true,
           },
         },
       },
-      minify: rzpack.mode === 'production',
+      minify: process.env.NODE_ENV === 'production',
     })
     .end()
 }

packages/rzpack/src/build.ts → packages/rzpack/src/webpack/build.ts

@@ -9,9 +9,9 @@ import {
   lightYellow,
 } from 'rzpack-utils'
 import Webpack from 'webpack'
-import { rzpack } from './cli'
+import { rzpack } from '../cli'
 
-const runBuild = (isLog = true) => {
+export default (isLog = true) => {
   // 抽离公共部分
   rzpack.webpackChain
     // 抛出错误之后停止打包
@@ -38,7 +38,7 @@ const runBuild = (isLog = true) => {
   if (rzpack.cache) {
     rzpack.webpackChain.cache({
       type: 'filesystem',
-      name: `${rzpack.mode}-cache`,
+      name: `${process.env.NODE_ENV}-cache`,
       version: createEnvHash(raw),
       cacheDirectory: getFileFullPath('./node_modules/.cache'),
       store: 'pack',
@@ -123,5 +123,3 @@ const logBuildAssets = (stats) => {
 
   console.log(`\n✨  Done in ${(time / 1000).toPrecision(2)}s.`)
 }
-
-export default runBuild

packages/rzpack/src/configs/alias.ts → packages/rzpack/src/webpack/configs/alias.ts

@@ -1,8 +1,6 @@
 import { pathResolve } from 'rzpack-utils'
 import type WebpackChain from 'webpack-chain'
 
-const resolveAlias = (webpackChain: WebpackChain) => {
+export default (webpackChain: WebpackChain) => {
   webpackChain.resolve.alias.set('@', pathResolve('src', process.cwd()))
 }
-
-export default resolveAlias

packages/rzpack/src/configs/entry.ts → packages/rzpack/src/webpack/configs/entry.ts

@@ -1,6 +1,6 @@
 import { logError } from 'rzpack-utils'
 import type WebpackChain from 'webpack-chain'
-import { DEFAULT_CONFIG } from '../constant'
+import { DEFAULT_CONFIG } from '../../constant'
 
 const getEntryKey = (entry: string) =>
   entry
@@ -11,7 +11,7 @@ const getEntryKey = (entry: string) =>
     .replace('.ts', '')
     .replace('.js', '')
 
-const resolveEntry = (
+export default (
   webpackChain: WebpackChain,
   entry: string | string[] | Record<string, string>,
 ) => {
@@ -23,7 +23,7 @@ const resolveEntry = (
         webpackChain.entry(key).add(entry as string)
         break
       }
-      case entry instanceof Array: {
+      case Array.isArray(entry): {
         // eslint-disable-next-line no-case-declarations
         const entryOption = (entry as Array<string>).map((item: string) => {
           if (typeof item !== 'string') {
@@ -45,16 +45,14 @@ const resolveEntry = (
         })
         break
       }
-      case typeof entry === 'object':
-        entryOption.forEach((item: Record<string, string>) => {
-          const key = Object.keys(item)[0]
-          webpackChain.entry(key).add(item[key])
+      case typeof entry === 'object': {
+        Object.keys(entry).forEach((key: string) => {
+          webpackChain.entry(key).add(entry[key])
         })
         break
+      }
     }
   } else {
     webpackChain.entry('main').add(DEFAULT_CONFIG.ENTRY)
   }
 }
-
-export default resolveEntry

packages/rzpack/src/configs/extensions.ts → packages/rzpack/src/webpack/configs/extensions.ts

@@ -1,7 +1,5 @@
 import type WebpackChain from 'webpack-chain'
 
-const resolveExtensions = (webpackChain: WebpackChain) => {
+export default (webpackChain: WebpackChain) => {
   webpackChain.resolve.extensions.add('.jsx').add('.js').add('.ts').add('.tsx')
 }
-
-export default resolveExtensions

packages/rzpack/src/webpack/configs/index.ts

@@ -0,0 +1,24 @@
+import type WebpackChain from 'webpack-chain'
+import type { RzpackConfigs } from '../..'
+import loadAliasConfigs from './alias'
+import loadEntryConfigs from './entry'
+import loadExtensionsConfigs from './extensions'
+import loadLazyCompilationConfigs from './lazyCompilation'
+import loadMinimizerConfigs from './minimizer'
+import loadOutputConfigs from './output'
+const loadBaseConfigs = (
+  webpackChain: WebpackChain,
+  configs: RzpackConfigs,
+) => {
+  const { entry, output, assets, lazyCompilation } = configs
+  loadAliasConfigs(webpackChain)
+  loadEntryConfigs(webpackChain, entry)
+  loadExtensionsConfigs(webpackChain)
+  loadOutputConfigs(webpackChain, output)
+  loadLazyCompilationConfigs(webpackChain, lazyCompilation)
+  if (process.env.NODE_ENV === 'production') {
+    loadMinimizerConfigs(webpackChain, assets?.jsxTools, assets?.imageMini)
+  }
+}
+
+export default loadBaseConfigs