@mpxjs/webpack-plugin 2.10.16 → 2.10.17-beta.10

package/lib/config.js

@@ -553,6 +553,66 @@ module.exports = {
       show: 'dd:show'
     }
   },
+  ks: {
+    typeExtMap: {
+      json: '.json',
+      script: '.js',
+      template: '.ksml',
+      styles: '.css'
+    },
+    tabBar: {
+      itemKey: 'list',
+      iconKey: 'iconPath',
+      activeIconKey: 'selectedIconPath'
+    },
+    event: {
+      parseEvent (attr) {
+        const match = /^(bind|catch|capture-bind|capture-catch):?(.*?)(?:\.(.*))?$/.exec(attr)
+        if (match) {
+          return {
+            prefix: match[1],
+            eventName: match[2],
+            modifier: match[3]
+          }
+        }
+      },
+      getEvent (eventName, prefix = 'bind') {
+         if (eventName.includes('-')) {
+          return `${prefix}:${eventName}`
+        } else {
+          return prefix + eventName
+        }
+      },
+      defaultModelProp: 'value',
+      defaultModelEvent: 'input',
+      defaultModelValuePath: 'value'
+    },
+    wxs: {
+      tag: 'ks',
+      module: 'module',
+      src: 'src',
+      ext: '.ks',
+      templatePrefix: 'module.exports = \n'
+    },
+    directive: {
+      if: 'ks:if',
+      elseif: 'ks:elif',
+      else: 'ks:else',
+      for: 'ks:for',
+      forIndex: 'ks:for-index',
+      forItem: 'ks:for-item',
+      key: 'ks:key',
+      dynamicClass: 'ks:class',
+      dynamicStyle: 'ks:style',
+      ref: 'ks:ref',
+      show: 'ks:show',
+      model: 'ks:model',
+      modelProp: 'ks:model-prop',
+      modelEvent: 'ks:model-event',
+      modelValuePath: 'ks:model-value-path',
+      modelFilter: 'ks:model-filter'
+    }
+  },
   ios: reactConfig,
   android: reactConfig,
   harmony: reactConfig

package/lib/dependencies/AppEntryDependency.js

@@ -21,8 +21,8 @@ class AppEntryDependency extends NullDependency {
     if (mpx.appInfo.name) {
       const issuer = moduleGraph.getIssuer(module)
       const err = new Error(issuer
-        ? `[json compiler]:Mpx单次构建中只能存在一个App，当前组件/页面[${module.resource}]通过[${issuer.resource}]非法引入，引用的资源将被忽略，请确保组件/页面资源通过usingComponents/pages配置引入！`
-        : `[json compiler]:Mpx单次构建中只能存在一个App，请检查当前entry中的资源[${module.resource}]是否为组件/页面，通过添加?component/page查询字符串显式声明该资源是组件/页面！`)
+        ? `[Mpx json error]:Mpx单次构建中只能存在一个App，当前组件/页面[${module.resource}]通过[${issuer.resource}]非法引入，引用的资源将被忽略，请确保组件/页面资源通过usingComponents/pages配置引入！`
+        : `[Mpx json error]:Mpx单次构建中只能存在一个App，请检查当前entry中的资源[${module.resource}]是否为组件/页面，通过添加?component/page查询字符串显式声明该资源是组件/页面！`)
       return callback(err)
     }
 

package/lib/dependencies/RecordModuleIdMapDependency.js

@@ -0,0 +1,49 @@
+const NullDependency = require('webpack/lib/dependencies/NullDependency')
+const makeSerializable = require('webpack/lib/util/makeSerializable')
+
+class RecordModuleIdMapDependency extends NullDependency {
+  constructor (moduleId, filePath) {
+    super()
+    this.moduleId = moduleId
+    this.filePath = filePath
+  }
+
+  get type () {
+    return 'mpx record module id map'
+  }
+
+  mpxAction (module, compilation, callback) {
+    const mpx = compilation.__mpx__
+    const { moduleId, filePath } = this
+    // 确保 resourceModuleIdMap 存在
+    if (!mpx.resourceModuleIdMap) {
+      mpx.resourceModuleIdMap = {}
+    }
+    // 记录 moduleId 和 filePath 的映射关系
+    mpx.resourceModuleIdMap[moduleId] = filePath
+    return callback()
+  }
+
+  serialize (context) {
+    const { write } = context
+    write(this.moduleId)
+    write(this.filePath)
+    super.serialize(context)
+  }
+
+  deserialize (context) {
+    const { read } = context
+    this.moduleId = read()
+    this.filePath = read()
+    super.deserialize(context)
+  }
+}
+
+RecordModuleIdMapDependency.Template = class RecordModuleIdMapDependencyTemplate {
+  apply () {
+  }
+}
+
+makeSerializable(RecordModuleIdMapDependency, '@mpxjs/webpack-plugin/lib/dependencies/RecordModuleIdMapDependency')
+
+module.exports = RecordModuleIdMapDependency

package/lib/dependencies/ResolveDependency.js

@@ -36,7 +36,7 @@ class ResolveDependency extends NullDependency {
     const resolveResult = pagesMap[resourcePath] || currentComponentsMap[resourcePath] || mainComponentsMap[resourcePath] || currentStaticResourcesMap[resourcePath] || mainStaticResourcesMap[resourcePath] || ''
     if (!resolveResult) {
       if (!partialCompileRules || matchCondition(resourcePath, partialCompileRules)) {
-        compilation.errors.push(new Error(`Path ${resource} is not a page/component/static resource, which is resolved from ${issuerResource}!`))
+        compilation.errors.push(new Error(`[Mpx json error]:Path ${resource} is not a page/component/static resource, which is resolved from ${issuerResource}!`))
       }
     }
     return resolveResult

package/lib/file-loader.js

@@ -8,7 +8,9 @@ module.exports = function loader (content, prevOptions) {
   const options = prevOptions || loaderUtils.getOptions(this) || {}
   const context = options.context || this.rootContext
   const mpx = this.getMpx()
-  const isRN = ['ios', 'android', 'harmony'].includes(mpx.mode)
+
+  const { mode } = mpx
+  const isRN = ['ios', 'android', 'harmony'].includes(mode)
 
   let url = loaderUtils.interpolateName(this, options.name, {
     context,
@@ -47,6 +49,7 @@ module.exports = function loader (content, prevOptions) {
         ? options.publicPath
         : `${options.publicPath}/`}${url}`
     }
+
     publicPath = JSON.stringify(publicPath)
   }
 

package/lib/global.d.ts

@@ -0,0 +1,245 @@
+import * as webpack from 'webpack'
+
+declare module 'webpack' {
+  interface Compilation {
+    __mpx__: MpxContext
+  }
+
+  interface Compiler {
+    __mpx__?: boolean
+  }
+}
+
+declare global {
+    interface MpxWebpackPluginOptions {
+    style: {
+      cssCondition?: {
+        before?: boolean
+        after?: boolean
+        beforeExclude?: (string | RegExp)[]
+        afterExclude?: (string | RegExp)[]
+        legacy?: boolean
+        afterLegacy?: boolean
+        beforeLegacy?: boolean
+      }
+    }
+  }
+
+  type MpxLoaderContext<T> = webpack.LoaderContext<T> & {
+    getMpx(): MpxContext
+  }
+
+  interface MpxContext {
+    /**
+     * 用于使用 webpack-virtual-modules 功能，目前仅在输出 web 时支持使用
+     */
+    __vfs: any | null
+
+    /**
+     * app 信息，便于获取 appName
+     */
+    appInfo: {
+      resourcePath?: string
+      name?: string
+      [key: string]: any
+    }
+
+    /**
+     * pageConfig 信息
+     */
+    pageConfigsMap: Record<string, any>
+
+    /**
+     * pages 全局记录，无需区分主包/分包
+     */
+    pagesMap: Record<string, string>
+
+    /**
+     * 组件资源记录，按所属包进行记录（如 componentsMap.main）
+     */
+    componentsMap: Record<string, Record<string, string>>
+
+    /**
+     * 静态资源（图片、字体、独立样式）等，按所属包进行记录
+     */
+    staticResourcesMap: Record<string, Record<string, string>>
+
+    /**
+     * 用于记录命中 subpackageModulesRules 的 JS 模块分包归属，用于 JS 多分包冗余输出
+     */
+    subpackageModulesMap: Record<string, Record<string, string>>
+
+    /**
+     * 记录其他资源，如 pluginMain、pluginExport，无需区分主包/分包
+     */
+    otherResourcesMap: Record<string, any>
+
+    /**
+     * 记录独立分包
+     */
+    independentSubpackagesMap: Record<string, any>
+
+    subpackagesEntriesMap: Record<string, any>
+    postSubpackageEntriesMap: Record<string, any>
+    replacePathMap: Record<string, string>
+
+    /**
+     * 导出模块集合
+     */
+    exportModules: Set<any>
+
+    /**
+     * 记录动态添加入口的分包信息
+     */
+    dynamicEntryInfo: Record<string, any>
+
+    /**
+     * 记录 entryModule 与 entryNode 的对应关系，用于体积分析
+     */
+    entryNodeModulesMap: Map<any, any>
+
+    /**
+     * 记录与 asset 相关联的 modules，用于体积分析
+     */
+    assetsModulesMap: Map<string, Set<any>>
+
+    /**
+     * 记录与 asset 相关联的 AST，用于体积分析和 esCheck，避免重复 parse
+     */
+    assetsASTsMap: Map<string, any>
+
+    /**
+     * 记录 RequireExternalDependency 相关资源路径
+     */
+    externalRequestsMap: Map<string, any>
+
+    globalComponents: Record<string, any>
+    globalComponentsInfo: Record<string, any>
+
+    /**
+     * todo: es6 Map 读写性能高于 object，之后会逐步替换
+     */
+    wxsAssetsCache: Map<string, any>
+    addEntryPromiseMap: Map<string, Promise<any>>
+    currentPackageRoot: string
+    wxsContentMap: Record<string, string>
+
+    /**
+     * 是否强制使用页面构造函数
+     */
+    forceUsePageCtor: boolean
+
+    resolveMode: string
+    mode: string
+    srcMode: string
+    env: string
+    externalClasses: string[]
+    projectRoot: string
+    autoScopeRules: any
+    autoVirtualHostRules: any
+    customTextRules: any
+    transRpxRules: any
+    postcssInlineConfig: any
+    decodeHTMLText: boolean
+
+    /**
+     * native 文件专用配置
+     */
+    i18n: any | null
+    checkUsingComponentsRules: any
+    forceDisableBuiltInLoader: boolean
+
+    /**
+     * 默认的应用标题
+     */
+    appTitle: string
+
+    attributes: any[]
+    externals: any[]
+    useRelativePath: boolean
+    removedChunks: any[]
+    forceProxyEventRules: any
+
+    /**
+     * 若配置 disableRequireAsync=true，则全平台构建不支持异步分包
+     */
+    supportRequireAsync: boolean
+    partialCompileRules: any
+    asyncSubpackageRules: any[]
+    transSubpackageRules: any
+    optimizeRenderRules: any[]
+
+    addEntryModuleIssuer: (module: string, issuer: string) => void
+
+    /**
+     * 资源路径的哈希函数（用于生成输出唯一名）
+     */
+    pathHash: (resourcePath: string) => string
+
+    // 缓存与工具
+    loaderContentCache: Map<string, any>
+    extractedFilesCache: Map<string, string>
+
+    // 函数接口
+
+    /**
+     * 收集动态入口信息（分包、文件名、是否为页面、是否包含异步等）
+     */
+    collectDynamicEntryInfo: (info: { resource: string; packageName: string; filename: string; entryType: string; hasAsync: boolean }) => void
+
+    /**
+     * 添加入口（包装了 webpack 的 addEntry）
+     */
+    addEntry: (request: string, name: string, callback: (err?: Error, result?: any) => void) => any
+
+    getModuleId: (filePath: string, isApp?: boolean) => string
+    getEntryNode: (module: any, type?: string) => any
+
+    /**
+     * 根据资源路径和类型返回输出路径（支持自定义输出、冲突处理等）
+     */
+    getOutputPath: (resourcePath: string, type: string, opts?: { ext?: string; conflictPath?: string }) => string
+
+    /**
+     * 获取提取后的文件名（支持静态、插件、普通资源）
+     */
+    getExtractedFile: (resource: string, opts?: { error?: (err: Error) => void }) => string
+
+    recordResourceMap: (params: {
+      resourcePath: string
+      resourceType: string
+      outputPath?: string
+      packageRoot?: string
+      recordOnly?: boolean
+      warn?: (e: Error) => void
+      error?: (e: Error) => void
+    }) => { outputPath?: string; alreadyOutputted?: boolean }
+
+    getPackageInfo: (params: {
+      resource: string
+      resourceType: string
+      outputPath?: string
+      issuerResource?: string
+      warn?: (e: Error) => void
+      error?: (e: Error) => void
+    }) => { packageName: string; packageRoot: string; outputPath?: string; alreadyOutputted?: boolean }
+
+    // 运行时信息与注入相关
+    runtimeInfo: Record<string, any>
+    dynamicSlotDependencies: Record<string, any>
+    dynamicTemplateRuleRunner: any
+
+    /**
+     * 依据 package 注入到 mpx-custom-element-*.json 里面的组件路径
+     */
+    getPackageInjectedComponentsMap: (packageName?: string) => Record<string, string>
+
+    getPackageInjectedTemplateConfig: (packageName?: string) => any
+    injectDynamicSlotDependencies: (usingComponents: string, resourcePath: string) => string
+    changeHashNameForAstNode: (templateAst: string, componentsMap: any) => string
+    collectDynamicSlotDependencies: (packageName?: string) => void
+
+    // 其它任意扩展字段
+    [key: string]: any
+  }
+}

package/lib/helpers.js

@@ -69,6 +69,8 @@ module.exports = function createHelpers (loaderContext) {
         if (part.useJSONJS) options.useJSONJS = true
       // eslint-disable-next-line no-fallthrough
       case 'styles':
+        options.lang = part.lang
+      // eslint-disable-next-line no-fallthrough
       case 'template':
         options.extract = true
     }

package/lib/index.js

@@ -36,6 +36,7 @@ const FixDescriptionInfoPlugin = require('./resolver/FixDescriptionInfoPlugin')
 const AppEntryDependency = require('./dependencies/AppEntryDependency')
 const RecordPageConfigMapDependency = require('./dependencies/RecordPageConfigsMapDependency')
 const RecordResourceMapDependency = require('./dependencies/RecordResourceMapDependency')
+const RecordModuleIdMapDependency = require('./dependencies/RecordModuleIdMapDependency')
 const RecordGlobalComponentsDependency = require('./dependencies/RecordGlobalComponentsDependency')
 const RecordIndependentDependency = require('./dependencies/RecordIndependentDependency')
 const DynamicEntryDependency = require('./dependencies/DynamicEntryDependency')
@@ -78,13 +79,18 @@ const LoadAsyncChunkModule = require('./react/LoadAsyncChunkModule')
 const ExternalModule = require('webpack/lib/ExternalModule')
 const { RetryRuntimeModule, RetryRuntimeGlobal } = require('./dependencies/RetryRuntimeModule')
 const checkVersionCompatibility = require('./utils/check-core-version-match')
-
+const { rewriteFSForCss, startFSStripForCss } = require('./style-compiler/strip-conditional-loader')
+rewriteFSForCss()
 checkVersionCompatibility()
 
 const isProductionLikeMode = options => {
   return options.mode === 'production' || !options.mode
 }
 
+/**
+ * @param {import('webpack').NormalModule} module
+ * @returns
+ */
 const isStaticModule = module => {
   if (!module.resource) return false
   const { queryObj } = parseRequest(module.resource)
@@ -321,7 +327,13 @@ class MpxWebpackPlugin {
     }
   }
 
+  /**
+   * @param {import('webpack').Compiler} compiler
+   */
   apply (compiler) {
+    // 注入 fs 代理
+    startFSStripForCss(this.options.defs)
+
     if (!compiler.__mpx__) {
       compiler.__mpx__ = true
     } else {
@@ -673,6 +685,9 @@ class MpxWebpackPlugin {
       compilation.dependencyFactories.set(RecordResourceMapDependency, new NullFactory())
       compilation.dependencyTemplates.set(RecordResourceMapDependency, new RecordResourceMapDependency.Template())
 
+      compilation.dependencyFactories.set(RecordModuleIdMapDependency, new NullFactory())
+      compilation.dependencyTemplates.set(RecordModuleIdMapDependency, new RecordModuleIdMapDependency.Template())
+
       compilation.dependencyFactories.set(RecordGlobalComponentsDependency, new NullFactory())
       compilation.dependencyTemplates.set(RecordGlobalComponentsDependency, new RecordGlobalComponentsDependency.Template())
 
@@ -721,6 +736,8 @@ class MpxWebpackPlugin {
           componentsMap: {
             main: {}
           },
+          // 资源与moduleId关系记录
+          resourceModuleIdMap: {},
           // 静态资源(图片，字体，独立样式)等，依照所属包进行记录
           staticResourcesMap: {
             main: {}
@@ -788,6 +805,7 @@ class MpxWebpackPlugin {
           // 若配置disableRequireAsync=true, 则全平台构建不支持异步分包
           supportRequireAsync: !this.options.disableRequireAsync && (this.options.mode === 'wx' || this.options.mode === 'ali' || this.options.mode === 'tt' || isWeb(this.options.mode) || (isReact(this.options.mode) && this.options.rnConfig.supportSubpackage)),
           partialCompileRules: this.options.partialCompileRules,
+          useExtendComponents: this.options.useExtendComponents,
           collectDynamicEntryInfo: ({ resource, packageName, filename, entryType, hasAsync }) => {
             const curInfo = mpx.dynamicEntryInfo[packageName] = mpx.dynamicEntryInfo[packageName] || {
               hasPage: false,
@@ -1450,9 +1468,17 @@ class MpxWebpackPlugin {
               // 删除root query
               if (queryObj.root) request = addQuery(request, {}, false, ['root'])
               // wx、ali和web平台支持require.async，其余平台使用CommonJsAsyncDependency进行模拟抹平
-              if (mpx.supportRequireAsync) {
+              let shouldSplitChunk = mpx.supportRequireAsync
+              if (shouldSplitChunk && isReact(mpx.mode)) {
+                const transTarRoot = transSubpackage(mpx.transSubpackageRules, tarRoot)
+                tarRoot = transTarRoot
+                if (transTarRoot === '') {
+                  shouldSplitChunk = false
+                }
+              }
+
+              if (shouldSplitChunk) {
                 if (isWeb(mpx.mode) || isReact(mpx.mode)) {
-                  if (isReact(mpx.mode)) tarRoot = transSubpackage(mpx.transSubpackageRules, tarRoot)
                   const depBlock = new AsyncDependenciesBlock(
                     {
                       name: tarRoot + '/index'
@@ -1684,11 +1710,12 @@ class MpxWebpackPlugin {
 
         if (this.options.generateBuildMap) {
           const pagesMap = compilation.__mpx__.pagesMap
+          const resourceModuleIdMap = compilation.__mpx__.resourceModuleIdMap
           const componentsPackageMap = compilation.__mpx__.componentsMap
           const componentsMap = Object.keys(componentsPackageMap).map(item => componentsPackageMap[item]).reduce((pre, cur) => {
             return { ...pre, ...cur }
           }, {})
-          const outputMap = JSON.stringify({ ...pagesMap, ...componentsMap })
+          const outputMap = JSON.stringify({ outputPathMap: { ...pagesMap, ...componentsMap }, moduleIdMap: resourceModuleIdMap })
           const filename = this.options.generateBuildMap.filename || 'outputMap.json'
           compilation.assets[filename] = new RawSource(outputMap)
         }
@@ -1722,7 +1749,14 @@ class MpxWebpackPlugin {
 
           if (isReact(mpx.mode)) {
             // 添加 @refresh reset 注释用于在 React HMR 时刷新组件
-            source.add('/* @refresh reset */\n')
+            if (process.env.NODE_ENV !== 'production') {
+              source.add(`/* @refresh reset */
+if (module.hot) {
+  module.hot.accept(() => {
+    require("react-native").DevSettings.reload();
+  });
+}\n`)
+            }
             // 注入页面的配置，供screen前置设置导航情况
             if (isRuntime) {
               source.add('// inject pageconfigmap for screen\n' +
@@ -1900,24 +1934,41 @@ try {
       normalModuleFactory.hooks.afterResolve.tap('MpxWebpackPlugin', ({ createData }) => {
         const { queryObj } = parseRequest(createData.request)
         const loaders = createData.loaders
+
+        // 样式 loader 类型检测和条件编译 loader 插入的工具函数
+        const STYLE_LOADER_TYPES = ['stylus-loader', 'sass-loader', 'less-loader', 'css-loader', wxssLoaderPath]
+        const injectStyleStripLoader = (loaders) => {
+          // 检查是否已经存在 stripLoader
+          const hasStripLoader = loaders.some(loader => {
+            const loaderPath = toPosix(loader.loader)
+            return loaderPath.includes('style-compiler/strip-conditional-loader')
+          })
+          if (hasStripLoader) {
+            return
+          }
+          const loaderTypes = new Map(STYLE_LOADER_TYPES.map(type => [`node_modules/${type}`, -1]))
+          loaders.forEach((loader, index) => {
+            const currentLoader = toPosix(loader.loader)
+            for (const [key] of loaderTypes) {
+              if (currentLoader.includes(key)) {
+                loaderTypes.set(key, index)
+                break
+              }
+            }
+          })
+          const targetIndex = STYLE_LOADER_TYPES
+            .map(type => loaderTypes.get(`node_modules/${type}`))
+            .find(index => index !== -1)
+
+          if (targetIndex !== undefined) {
+            loaders.splice(targetIndex + 1, 0, { loader: styleStripConditionalPath })
+          }
+        }
         if (queryObj.mpx && queryObj.mpx !== MPX_PROCESSED_FLAG) {
           const type = queryObj.type
           const extract = queryObj.extract
-
           if (type === 'styles') {
-            let insertBeforeIndex = -1
-            // 单次遍历收集所有索引
-            loaders.forEach((loader, index) => {
-              const currentLoader = toPosix(loader.loader)
-              if (currentLoader.includes('node_modules/stylus-loader') || currentLoader.includes('node_modules/sass-loader') || currentLoader.includes('node_modules/less-loader')) {
-                insertBeforeIndex = index
-              }
-            })
-
-            if (insertBeforeIndex !== -1) {
-              loaders.splice(insertBeforeIndex, 0, { loader: styleStripConditionalPath })
-            }
-            loaders.push({ loader: styleStripConditionalPath })
+            injectStyleStripLoader(loaders)
           }
 
           switch (type) {
@@ -1971,6 +2022,7 @@ try {
         }
         // mpxStyleOptions 为 mpx style 文件的标识，避免 Vue 文件插入 styleCompiler 后导致 vue scoped 样式隔离失效
         if (isWeb(mpx.mode) && queryObj.mpxStyleOptions) {
+          injectStyleStripLoader(loaders)
           const firstLoader = loaders[0] ? toPosix(loaders[0].loader) : ''
           const isPitcherRequest = firstLoader.includes('node_modules/vue-loader/lib/loaders/pitcher')
           let cssLoaderIndex = -1
@@ -2062,3 +2114,12 @@ try {
 }
 
 module.exports = MpxWebpackPlugin
+
+/**
+ * 定义 MpxWebpackPlugin 的配置
+ * @param {MpxWebpackPluginOptions} options - 插件选项
+ * @returns {MpxWebpackPluginOptions}
+ */
+module.exports.defineConfig = function defineConfig(options) {
+  return options
+}