@mpxjs/webpack-plugin 2.6.115 → 2.7.0-alpha

package/lib/index.js

@@ -1,68 +1,89 @@
 'use strict'
 
 const path = require('path')
-const ConcatSource = require('webpack-sources').ConcatSource
-const RawSource = require('webpack-sources').RawSource
-const ResolveDependency = require('./dependency/ResolveDependency')
-const InjectDependency = require('./dependency/InjectDependency')
-const ReplaceDependency = require('./dependency/ReplaceDependency')
-const ChildCompileDependency = require('./dependency/ChildCompileDependency')
+const { ConcatSource, RawSource } = require('webpack').sources
+const ResolveDependency = require('./dependencies/ResolveDependency')
+const InjectDependency = require('./dependencies/InjectDependency')
+const ReplaceDependency = require('./dependencies/ReplaceDependency')
 const NullFactory = require('webpack/lib/NullFactory')
+const CommonJsVariableDependency = require('./dependencies/CommonJsVariableDependency')
+const CommonJsAsyncDependency = require('./dependencies/CommonJsAsyncDependency')
+const harmonySpecifierTag = require('webpack/lib/dependencies/HarmonyImportDependencyParserPlugin').harmonySpecifierTag
+const NormalModule = require('webpack/lib/NormalModule')
+const EntryPlugin = require('webpack/lib/EntryPlugin')
+const JavascriptModulesPlugin = require('webpack/lib/javascript/JavascriptModulesPlugin')
+const FlagEntryExportAsUsedPlugin = require('webpack/lib/FlagEntryExportAsUsedPlugin')
+const FileSystemInfo = require('webpack/lib/FileSystemInfo')
 const normalize = require('./utils/normalize')
 const toPosix = require('./utils/to-posix')
 const addQuery = require('./utils/add-query')
+const { every } = require('./utils/set')
 const DefinePlugin = require('webpack/lib/DefinePlugin')
 const ExternalsPlugin = require('webpack/lib/ExternalsPlugin')
 const AddModePlugin = require('./resolver/AddModePlugin')
 const AddEnvPlugin = require('./resolver/AddEnvPlugin')
 const PackageEntryPlugin = require('./resolver/PackageEntryPlugin')
-const CommonJsRequireDependency = require('webpack/lib/dependencies/CommonJsRequireDependency')
-const HarmonyImportSideEffectDependency = require('webpack/lib/dependencies/HarmonyImportSideEffectDependency')
-const RequireHeaderDependency = require('webpack/lib/dependencies/RequireHeaderDependency')
-const RemovedModuleDependency = require('./dependency/RemovedModuleDependency')
+const FixDescriptionInfoPlugin = require('./resolver/FixDescriptionInfoPlugin')
+// const CommonJsRequireDependency = require('webpack/lib/dependencies/CommonJsRequireDependency')
+// const HarmonyImportSideEffectDependency = require('webpack/lib/dependencies/HarmonyImportSideEffectDependency')
+// const RequireHeaderDependency = require('webpack/lib/dependencies/RequireHeaderDependency')
+// const RemovedModuleDependency = require('./dependencies/RemovedModuleDependency')
+const AppEntryDependency = require('./dependencies/AppEntryDependency')
+const RecordResourceMapDependency = require('./dependencies/RecordResourceMapDependency')
+const RecordGlobalComponentsDependency = require('./dependencies/RecordGlobalComponentsDependency')
+const RecordIndependentDependency = require('./dependencies/RecordIndependentDependency')
+const DynamicEntryDependency = require('./dependencies/DynamicEntryDependency')
+const FlagPluginDependency = require('./dependencies/FlagPluginDependency')
+const RemoveEntryDependency = require('./dependencies/RemoveEntryDependency')
 const SplitChunksPlugin = require('webpack/lib/optimize/SplitChunksPlugin')
+const PartialCompilePlugin = require('./partial-compile/index')
 const fixRelative = require('./utils/fix-relative')
 const parseRequest = require('./utils/parse-request')
-const matchCondition = require('./utils/match-condition')
+const { matchCondition } = require('./utils/match-condition')
 const { preProcessDefs } = require('./utils/index')
+const config = require('./config')
 const hash = require('hash-sum')
+const wxssLoaderPath = normalize.lib('wxss/loader')
+const wxmlLoaderPath = normalize.lib('wxml/loader')
+const wxsLoaderPath = normalize.lib('wxs/loader')
+const styleCompilerPath = normalize.lib('style-compiler/index')
+const templateCompilerPath = normalize.lib('template-compiler/index')
+const jsonCompilerPath = normalize.lib('json-compiler/index')
+const jsonThemeCompilerPath = normalize.lib('json-compiler/theme')
+const jsonPluginCompilerPath = normalize.lib('json-compiler/plugin')
+const extractorPath = normalize.lib('extractor')
+const async = require('async')
+const stringifyLoadersAndResource = require('./utils/stringify-loaders-resource')
+const emitFile = require('./utils/emit-file')
+const { MPX_PROCESSED_FLAG, MPX_DISABLE_EXTRACTOR_CACHE, MPX_CURRENT_CHUNK } = require('./utils/const')
+const isEmptyObject = require('./utils/is-empty-object')
 
 const isProductionLikeMode = options => {
   return options.mode === 'production' || !options.mode
 }
 
+const isStaticModule = module => {
+  if (!module.resource) return false
+  const { queryObj } = parseRequest(module.resource)
+  let isStatic = queryObj.isStatic || false
+  if (module.loaders) {
+    for (const loader of module.loaders) {
+      if (/(url-loader|file-loader)/.test(loader.loader)) {
+        isStatic = true
+        break
+      }
+    }
+  }
+  return isStatic
+}
+
 const outputFilename = '[name].js'
 const publicPath = '/'
 
-function isChunkInPackage (chunkName, packageName) {
+const isChunkInPackage = (chunkName, packageName) => {
   return (new RegExp(`^${packageName}\\/`)).test(chunkName)
 }
 
-function getPackageCacheGroup (packageName) {
-  if (packageName === 'main') {
-    return {
-      name: 'bundle',
-      minChunks: 2,
-      chunks: 'all'
-    }
-  } else {
-    return {
-      test: (module, chunks) => {
-        return chunks.every((chunk) => {
-          return isChunkInPackage(chunk.name, packageName)
-        })
-      },
-      name: `${packageName}/bundle`,
-      minChunks: 2,
-      minSize: 1000,
-      priority: 100,
-      chunks: 'all'
-    }
-  }
-}
-
-let loaderOptions
-
 const externalsMap = {
   weui: /^weui-miniprogram/
 }
@@ -71,10 +92,9 @@ const warnings = []
 const errors = []
 
 class EntryNode {
-  constructor (options) {
-    this.request = options.request
-    this.type = options.type
-    this.module = null
+  constructor (module, type) {
+    this.module = module
+    this.type = type
     this.parents = new Set()
     this.children = new Set()
   }
@@ -102,7 +122,6 @@ class MpxWebpackPlugin {
     options.writeMode = options.writeMode || 'changed'
     options.autoScopeRules = options.autoScopeRules || {}
     options.autoVirtualHostRules = options.autoVirtualHostRules || {}
-    options.forceDisableInject = options.forceDisableInject || false
     options.forceDisableProxyCtor = options.forceDisableProxyCtor || false
     options.transMpxRules = options.transMpxRules || {
       include: () => true
@@ -124,12 +143,8 @@ class MpxWebpackPlugin {
     options.forceUsePageCtor = options.forceUsePageCtor || false
     options.postcssInlineConfig = options.postcssInlineConfig || {}
     options.transRpxRules = options.transRpxRules || null
-    options.webConfig = options.webConfig || {}
     options.auditResource = options.auditResource || false
     options.decodeHTMLText = options.decodeHTMLText || false
-    options.nativeOptions = Object.assign({
-      cssLangs: ['css', 'less', 'stylus', 'scss', 'sass']
-    }, options.nativeOptions)
     options.i18n = options.i18n || null
     options.checkUsingComponents = options.checkUsingComponents || false
     options.reportSize = options.reportSize || null
@@ -144,31 +159,103 @@ class MpxWebpackPlugin {
       include: () => true
     }
     options.customOutputPath = options.customOutputPath || null
+    options.nativeConfig = Object.assign({
+      cssLangs: ['css', 'less', 'stylus', 'scss', 'sass']
+    }, options.nativeConfig)
+    options.webConfig = options.webConfig || {}
+    options.partialCompile = options.mode !== 'web' && options.partialCompile
+    let proxyComponentEventsRules = []
+    const proxyComponentEventsRulesRaw = options.proxyComponentEventsRules
+    if (proxyComponentEventsRulesRaw) {
+      proxyComponentEventsRules = Array.isArray(proxyComponentEventsRulesRaw) ? proxyComponentEventsRulesRaw : [proxyComponentEventsRulesRaw]
+    }
+    options.proxyComponentEventsRules = proxyComponentEventsRules
     this.options = options
+    // Hack for buildDependencies
+    const rawResolveBuildDependencies = FileSystemInfo.prototype.resolveBuildDependencies
+    FileSystemInfo.prototype.resolveBuildDependencies = function (context, deps, rawCallback) {
+      return rawResolveBuildDependencies.call(this, context, deps, (err, result) => {
+        if (result && typeof options.hackResolveBuildDependencies === 'function') options.hackResolveBuildDependencies(result)
+        return rawCallback(err, result)
+      })
+    }
   }
 
   static loader (options = {}) {
-    loaderOptions = options
-    if (loaderOptions.transRpx) {
+    if (options.transRpx) {
       warnings.push('Mpx loader option [transRpx] is deprecated now, please use mpx webpack plugin config [transRpxRules] instead!')
     }
-    return { loader: normalize.lib('loader'), options }
+    return {
+      loader: normalize.lib('loader'),
+      options
+    }
+  }
+
+  static nativeLoader (options = {}) {
+    return {
+      loader: normalize.lib('native-loader'),
+      options
+    }
+  }
+
+  static wxssLoader (options) {
+    return {
+      loader: normalize.lib('wxss/loader'),
+      options
+    }
+  }
+
+  static wxmlLoader (options) {
+    return {
+      loader: normalize.lib('wxml/loader'),
+      options
+    }
   }
 
   static pluginLoader (options = {}) {
-    return { loader: normalize.lib('plugin-loader'), options }
+    return {
+      loader: normalize.lib('json-compiler/plugin'),
+      options
+    }
   }
 
   static wxsPreLoader (options = {}) {
-    return { loader: normalize.lib('wxs/wxs-pre-loader'), options }
+    return {
+      loader: normalize.lib('wxs/pre-loader'),
+      options
+    }
   }
 
   static urlLoader (options = {}) {
-    return { loader: normalize.lib('url-loader'), options }
+    return {
+      loader: normalize.lib('url-loader'),
+      options
+    }
   }
 
   static fileLoader (options = {}) {
-    return { loader: normalize.lib('file-loader'), options }
+    return {
+      loader: normalize.lib('file-loader'),
+      options
+    }
+  }
+
+  static getPageEntry (request) {
+    return addQuery(request, { isPage: true })
+  }
+
+  static getComponentEntry (request) {
+    return addQuery(request, { isComponent: true })
+  }
+
+  static getPluginEntry (request) {
+    return addQuery(request, {
+      mpx: true,
+      extract: true,
+      isPlugin: true,
+      asScript: true,
+      type: 'json'
+    })
   }
 
   runModeRules (data) {
@@ -194,6 +281,9 @@ class MpxWebpackPlugin {
       errors.push('Multiple MpxWebpackPlugin instances exist in webpack compiler, please check webpack plugins config!')
     }
 
+    // 将entry export标记为used且不可mangle，避免require.async生成的js chunk在生产环境下报错
+    new FlagEntryExportAsUsedPlugin(true, 'entry').apply(compiler)
+
     if (this.options.mode !== 'web') {
       // 强制设置publicPath为'/'
       if (compiler.options.output.publicPath && compiler.options.output.publicPath !== publicPath) {
@@ -209,12 +299,11 @@ class MpxWebpackPlugin {
     if (!compiler.options.node || !compiler.options.node.global) {
       compiler.options.node = compiler.options.node || {}
       compiler.options.node.global = true
-      warnings.push(`webpack options: MpxWebpackPlugin strongly depends options.node.globel to be true, custom options.node will be ignored!`)
     }
 
     const addModePlugin = new AddModePlugin('before-file', this.options.mode, this.options.fileConditionRules, 'file')
     const addEnvPlugin = new AddEnvPlugin('before-file', this.options.env, this.options.fileConditionRules, 'file')
-    const packageEntryPlugin = new PackageEntryPlugin('before-described-relative', this.options.miniNpmPackages, 'resolve')
+    const packageEntryPlugin = new PackageEntryPlugin('before-file', this.options.miniNpmPackages, 'file')
     if (Array.isArray(compiler.options.resolve.plugins)) {
       compiler.options.resolve.plugins.push(addModePlugin)
     } else {
@@ -224,12 +313,14 @@ class MpxWebpackPlugin {
       compiler.options.resolve.plugins.push(addEnvPlugin)
     }
     compiler.options.resolve.plugins.push(packageEntryPlugin)
+    compiler.options.resolve.plugins.push(new FixDescriptionInfoPlugin())
 
     let splitChunksPlugin
     let splitChunksOptions
 
-    if (this.options.mode !== 'web') {
-      compiler.options.optimization.runtimeChunk = {
+    if (this.options.mode !== 'web' && this.options.mode !== 'tenon') {
+      const optimization = compiler.options.optimization
+      optimization.runtimeChunk = {
         name: (entrypoint) => {
           for (let packageName in mpx.independentSubpackagesMap) {
             if (mpx.independentSubpackagesMap.hasOwnProperty(packageName) && isChunkInPackage(entrypoint.name, packageName)) {
@@ -239,8 +330,18 @@ class MpxWebpackPlugin {
           return 'bundle'
         }
       }
-      splitChunksOptions = compiler.options.optimization.splitChunks
-      delete compiler.options.optimization.splitChunks
+      splitChunksOptions = Object.assign({
+        defaultSizeTypes: ['javascript', 'unknown'],
+        chunks: 'all',
+        usedExports: optimization.usedExports === true,
+        minChunks: 1,
+        minSize: 1000,
+        enforceSizeThreshold: Infinity,
+        maxAsyncRequests: 30,
+        maxInitialRequests: 30,
+        automaticNameDelimiter: '-'
+      }, optimization.splitChunks)
+      delete optimization.splitChunks
       splitChunksPlugin = new SplitChunksPlugin(splitChunksOptions)
       splitChunksPlugin.apply(compiler)
     }
@@ -258,8 +359,11 @@ class MpxWebpackPlugin {
         originalWriteFile(filePath, content, callback)
       }
     }
+
     const defs = this.options.defs
 
+    const typeExtMap = config[this.options.mode].typeExtMap
+
     const defsOpt = {
       '__mpx_wxs__': DefinePlugin.runtimeValue(({ module }) => {
         return JSON.stringify(!!module.wxs)
@@ -277,12 +381,92 @@ class MpxWebpackPlugin {
 
     let mpx
 
+    if (this.options.partialCompile) {
+      new PartialCompilePlugin(this.options.partialCompile).apply(compiler)
+    }
+
+    const getPackageCacheGroup = packageName => {
+      if (packageName === 'main') {
+        return {
+          // 对于独立分包模块不应用该cacheGroup
+          test: (module) => {
+            let isIndependent = false
+            if (module.resource) {
+              const { queryObj } = parseRequest(module.resource)
+              isIndependent = !!queryObj.independent
+            } else {
+              const identifier = module.identifier()
+              isIndependent = /\|independent=/.test(identifier)
+            }
+            return !isIndependent
+          },
+          name: 'bundle',
+          minChunks: 2,
+          chunks: 'all'
+        }
+      } else {
+        return {
+          test: (module, { chunkGraph }) => {
+            const chunks = chunkGraph.getModuleChunksIterable(module)
+            return chunks.size && every(chunks, (chunk) => {
+              return isChunkInPackage(chunk.name, packageName)
+            })
+          },
+          name: `${packageName}/bundle`,
+          minChunks: 2,
+          minSize: 1000,
+          priority: 100,
+          chunks: 'all'
+        }
+      }
+    }
+
+    const processSubpackagesEntriesMap = (compilation, callback) => {
+      const mpx = compilation.__mpx__
+      if (mpx && !isEmptyObject(mpx.subpackagesEntriesMap)) {
+        const subpackagesEntriesMap = mpx.subpackagesEntriesMap
+        // 执行分包队列前清空mpx.subpackagesEntriesMap
+        mpx.subpackagesEntriesMap = {}
+        async.eachOfSeries(subpackagesEntriesMap, (deps, packageRoot, callback) => {
+          mpx.currentPackageRoot = packageRoot
+          mpx.componentsMap[packageRoot] = mpx.componentsMap[packageRoot] || {}
+          mpx.staticResourcesMap[packageRoot] = mpx.staticResourcesMap[packageRoot] || {}
+          mpx.subpackageModulesMap[packageRoot] = mpx.subpackageModulesMap[packageRoot] || {}
+          async.each(deps, (dep, callback) => {
+            dep.addEntry(compilation, (err, { resultPath }) => {
+              if (err) return callback(err)
+              dep.resultPath = mpx.replacePathMap[dep.key] = resultPath
+              callback()
+            })
+          }, callback)
+        }, (err) => {
+          if (err) return callback(err)
+          // 如果执行完当前队列后产生了新的分包执行队列（一般由异步分包组件造成），则继续执行
+          processSubpackagesEntriesMap(compilation, callback)
+        })
+      } else {
+        callback()
+      }
+    }
+
+    // 构建分包队列，在finishMake钩子当中最先执行，stage传递-1000
+    compiler.hooks.finishMake.tapAsync({
+      name: 'MpxWebpackPlugin',
+      stage: -1000
+    }, (compilation, callback) => {
+      processSubpackagesEntriesMap(compilation, callback)
+    })
+
     compiler.hooks.compilation.tap('MpxWebpackPlugin ', (compilation, { normalModuleFactory }) => {
-      compilation.hooks.normalModuleLoader.tap('MpxWebpackPlugin', (loaderContext, module) => {
+      NormalModule.getCompilationHooks(compilation).loader.tap('MpxWebpackPlugin', (loaderContext) => {
         // 设置loaderContext的minimize
         if (isProductionLikeMode(compiler.options)) {
           loaderContext.minimize = true
         }
+
+        loaderContext.getMpx = () => {
+          return mpx
+        }
       })
       compilation.dependencyFactories.set(ResolveDependency, new NullFactory())
       compilation.dependencyTemplates.set(ResolveDependency, new ResolveDependency.Template())
@@ -293,161 +477,92 @@ class MpxWebpackPlugin {
       compilation.dependencyFactories.set(ReplaceDependency, new NullFactory())
       compilation.dependencyTemplates.set(ReplaceDependency, new ReplaceDependency.Template())
 
-      compilation.dependencyFactories.set(ChildCompileDependency, new NullFactory())
-      compilation.dependencyTemplates.set(ChildCompileDependency, new ChildCompileDependency.Template())
-
-      compilation.dependencyFactories.set(RemovedModuleDependency, normalModuleFactory)
-      compilation.dependencyTemplates.set(RemovedModuleDependency, new RemovedModuleDependency.Template())
-
-      // hack cacheGroup参数往addModule中传递当前module的issuer
-      const rawAddModuleDependencies = compilation.addModuleDependencies
-      compilation.addModuleDependencies = (
-        module,
-        dependencies,
-        bail,
-        cacheGroup,
-        recursive,
-        callback
-      ) => {
-        const hackedCacheGroup = {
-          module,
-          cacheGroup
-        }
-        return rawAddModuleDependencies.call(
-          compilation,
-          module,
-          dependencies,
-          bail,
-          hackedCacheGroup,
-          recursive,
-          callback
-        )
-      }
+      compilation.dependencyFactories.set(AppEntryDependency, new NullFactory())
+      compilation.dependencyTemplates.set(AppEntryDependency, new AppEntryDependency.Template())
 
-      // 处理watch时缓存模块中的buildInfo
-      // 在调用addModule前对module添加分包信息，以控制分包输出及消除缓存，该操作由afterResolve钩子迁移至此是由于dependencyCache的存在，watch状态下afterResolve钩子并不会对所有模块执行，而模块的packageName在watch过程中是可能发生变更的，如新增删除一个分包资源的主包引用
-      const rawAddModule = compilation.addModule
-      compilation.addModule = (module, cacheGroup) => {
-        let issuerResource
-        if (cacheGroup && cacheGroup.module) {
-          issuerResource = cacheGroup.module.resource
-          cacheGroup = cacheGroup.cacheGroup
-        }
-        // 避免context module报错
-        if (module.request && module.resource) {
-          const { queryObj, resourcePath } = parseRequest(module.resource)
-          let isStatic = queryObj.isStatic
-          if (module.loaders) {
-            module.loaders.forEach((loader) => {
-              if (/(url-loader|file-loader)/.test(loader.loader)) {
-                isStatic = true
-              }
-            })
-          }
-          const isIndependent = mpx.independentSubpackagesMap[mpx.currentPackageRoot]
+      compilation.dependencyFactories.set(DynamicEntryDependency, new NullFactory())
+      compilation.dependencyTemplates.set(DynamicEntryDependency, new DynamicEntryDependency.Template())
 
-          let needPackageQuery = isStatic || isIndependent
-          if (!needPackageQuery && matchCondition(resourcePath, this.options.subpackageModulesRules)) {
-            needPackageQuery = true
-          }
+      compilation.dependencyFactories.set(FlagPluginDependency, new NullFactory())
+      compilation.dependencyTemplates.set(FlagPluginDependency, new FlagPluginDependency.Template())
 
-          if (needPackageQuery) {
-            const { packageRoot } = mpx.getPackageInfo({
-              resource: module.resource,
-              resourceType: isStatic ? 'staticResources' : 'subpackageModules',
-              issuerResource,
-              warn (e) {
-                compilation.warnings.push(e)
-              },
-              error (e) {
-                compilation.errors.push(e)
-              }
-            })
-            const queryObj = {}
-            if (packageRoot) queryObj.packageRoot = packageRoot
-            // todo 后续可以考虑用module.layer来隔离独立分包的模块
-            if (isIndependent) queryObj.isIndependent = true
-            module.request = addQuery(module.request, queryObj)
-            module.resource = addQuery(module.resource, queryObj)
-          }
-        }
+      compilation.dependencyFactories.set(RemoveEntryDependency, new NullFactory())
+      compilation.dependencyTemplates.set(RemoveEntryDependency, new RemoveEntryDependency.Template())
 
-        const addModuleResult = rawAddModule.call(compilation, module, cacheGroup)
-        if (!addModuleResult.build && addModuleResult.issuer) {
-          const buildInfo = addModuleResult.module.buildInfo
-          if (buildInfo.pagesMap) {
-            Object.assign(mpx.pagesMap, buildInfo.pagesMap)
-          }
-          if (buildInfo.componentsMap && buildInfo.packageName) {
-            Object.assign(mpx.componentsMap[buildInfo.packageName], buildInfo.componentsMap)
-          }
-        }
-        return addModuleResult
-      }
+      compilation.dependencyFactories.set(RecordResourceMapDependency, new NullFactory())
+      compilation.dependencyTemplates.set(RecordResourceMapDependency, new RecordResourceMapDependency.Template())
+
+      compilation.dependencyFactories.set(RecordGlobalComponentsDependency, new NullFactory())
+      compilation.dependencyTemplates.set(RecordGlobalComponentsDependency, new RecordGlobalComponentsDependency.Template())
+
+      compilation.dependencyFactories.set(RecordIndependentDependency, new NullFactory())
+      compilation.dependencyTemplates.set(RecordIndependentDependency, new RecordIndependentDependency.Template())
+
+      compilation.dependencyFactories.set(CommonJsVariableDependency, normalModuleFactory)
+      compilation.dependencyTemplates.set(CommonJsVariableDependency, new CommonJsVariableDependency.Template())
+
+      compilation.dependencyFactories.set(CommonJsAsyncDependency, normalModuleFactory)
+      compilation.dependencyTemplates.set(CommonJsAsyncDependency, new CommonJsAsyncDependency.Template())
     })
 
     compiler.hooks.thisCompilation.tap('MpxWebpackPlugin', (compilation, { normalModuleFactory }) => {
       compilation.warnings = compilation.warnings.concat(warnings)
       compilation.errors = compilation.errors.concat(errors)
-      // additionalAssets和mpx由于包含缓存机制，必须在每次compilation时重新初始化
-      const additionalAssets = {}
+      const moduleGraph = compilation.moduleGraph
       if (!compilation.__mpx__) {
         // init mpx
         mpx = compilation.__mpx__ = {
+          // app信息，便于获取appName
+          appInfo: {},
           // pages全局记录，无需区分主包分包
           pagesMap: {},
-          // 记录pages对应的entry，处理多appEntry输出web多页项目时可能出现的pagePath冲突的问题，多appEntry输出目前仅web模式支持
-          pagesEntryMap: {},
-          // 组件资源记录，依照所属包进行记录，冗余存储，只要某个包有引用会添加对应记录，不管其会不会在当前包输出，这样设计主要是为了在resolve时能够以较低成本找到特定资源的输出路径
+          // 组件资源记录，依照所属包进行记录
           componentsMap: {
             main: {}
           },
-          // 静态资源(图片，字体，独立样式)等，依照所属包进行记录，冗余存储，同上
+          // 静态资源(图片，字体，独立样式)等，依照所属包进行记录
           staticResourcesMap: {
             main: {}
           },
-          // 用于记录命中subpackageModulesRules的js模块最终输出到了什么分包中
+          // 用于记录命中subpackageModulesRules的js模块分包归属，用于js多分包冗余输出
           subpackageModulesMap: {
             main: {}
           },
+          // 记录其他资源，如pluginMain、pluginExport，无需区分主包分包
+          otherResourcesMap: {},
           // 记录独立分包
           independentSubpackagesMap: {},
-          // 当前机制下分包处理队列在app.json的json-compiler中进行，由于addEntry回调特性，无法保障app.js中引用的模块都被标记为主包，故重写processModuleDependencies获取app.js及其所有依赖处理完成的时机，在这之后再执行分包处理队列
-          appScriptRawRequest: '',
-          appScriptPromise: null,
-          appScriptPromiseResolve: null,
-          // 记录entry依赖关系，用于体积分析
-          entryNodesMap: {},
+          subpackagesEntriesMap: {},
+          replacePathMap: {},
+          exportModules: new Set(),
           // 记录entryModule与entryNode的对应关系，用于体积分析
-          entryModulesMap: new Map(),
-          loaderOptions,
-          extractedMap: {},
+          entryNodeModulesMap: new Map(),
+          // 记录与asset相关联的modules，用于体积分析
+          assetsModulesMap: new Map(),
+          // 记录与asset相关联的ast，用于体积分析和esCheck，避免重复parse
+          assetsASTsMap: new Map(),
           usingComponents: {},
-          hasApp: false,
           // todo es6 map读写性能高于object，之后会逐步替换
           vueContentCache: new Map(),
+          wxsAssetsCache: new Map(),
           currentPackageRoot: '',
-          wxsMap: {},
           wxsContentMap: {},
-          assetsInfo: new Map(),
-          forceDisableInject: this.options.forceDisableInject,
           forceUsePageCtor: this.options.forceUsePageCtor,
           resolveMode: this.options.resolveMode,
           mode: this.options.mode,
           srcMode: this.options.srcMode,
           env: this.options.env,
-          // deprecated option
-          globalMpxAttrsFilter: this.options.globalMpxAttrsFilter,
           externalClasses: this.options.externalClasses,
           projectRoot: this.options.projectRoot,
           autoScopeRules: this.options.autoScopeRules,
           autoVirtualHostRules: this.options.autoVirtualHostRules,
           transRpxRules: this.options.transRpxRules,
-          webConfig: this.options.webConfig,
           postcssInlineConfig: this.options.postcssInlineConfig,
           decodeHTMLText: this.options.decodeHTMLText,
-          // native文件专用相关配置
-          nativeOptions: this.options.nativeOptions,
+          // native文件专用配置
+          nativeConfig: this.options.nativeConfig,
+          // 输出web专用配置
+          webConfig: this.options.webConfig,
           tabBarMap: {},
           defs: preProcessDefs(this.options.defs),
           i18n: this.options.i18n,
@@ -459,76 +574,121 @@ class MpxWebpackPlugin {
           useRelativePath: this.options.useRelativePath,
           removedChunks: [],
           forceProxyEventRules: this.options.forceProxyEventRules,
-          getEntryNode: (request, type, module) => {
-            const entryNodesMap = mpx.entryNodesMap
-            const entryModulesMap = mpx.entryModulesMap
-            if (!entryNodesMap[request]) {
-              entryNodesMap[request] = new EntryNode({
-                type,
-                request
-              })
-            }
-            const currentEntry = entryNodesMap[request]
-            if (currentEntry.type !== type) {
-              compilation.errors.push(`获取request为${request}的entryNode时类型与已有节点冲突, 当前获取的type为${type}, 已有节点的type为${currentEntry.type}!`)
-            }
-            if (module) {
-              currentEntry.module = module
-              entryModulesMap.set(module, currentEntry)
-            }
-            return currentEntry
-          },
+          proxyComponentEventsRules: this.options.proxyComponentEventsRules,
           pathHash: (resourcePath) => {
-            let hashPath = resourcePath
-            const pathHashMode = this.options.pathHashMode
-            const projectRoot = this.options.projectRoot || ''
-            if (pathHashMode === 'relative') {
-              hashPath = path.relative(projectRoot, resourcePath)
+            if (this.options.pathHashMode === 'relative' && this.options.projectRoot) {
+              return hash(path.relative(this.options.projectRoot, resourcePath))
             }
-            if (typeof pathHashMode === 'function') {
-              hashPath = pathHashMode(resourcePath, projectRoot) || resourcePath
+            return hash(resourcePath)
+          },
+          addEntry (request, name, callback) {
+            const dep = EntryPlugin.createDependency(request, { name })
+            compilation.addEntry(compiler.context, dep, { name }, callback)
+            return dep
+          },
+          getEntryNode: (module, type) => {
+            const entryNodeModulesMap = mpx.entryNodeModulesMap
+            let entryNode = entryNodeModulesMap.get(module)
+            if (!entryNode) {
+              entryNode = new EntryNode(module, type)
+              entryNodeModulesMap.set(module, entryNode)
             }
-            return hash(hashPath)
+            return entryNode
           },
           getOutputPath: (resourcePath, type, { ext = '', conflictPath = '' } = {}) => {
             const name = path.parse(resourcePath).name
             const hash = mpx.pathHash(resourcePath)
             const customOutputPath = this.options.customOutputPath
             if (conflictPath) return conflictPath.replace(/(\.[^\\/]+)?$/, match => hash + match)
-            if (typeof customOutputPath === 'function') return customOutputPath(type, name, hash, ext)
+            if (typeof customOutputPath === 'function') return customOutputPath(type, name, hash, ext).replace(/^\//, '')
             if (type === 'component' || type === 'page') return path.join(type + 's', name + hash, 'index' + ext)
             return path.join(type, name + hash + ext)
           },
-          extract: (content, file, index, sideEffects) => {
-            index = index === -1 ? 0 : index
-            additionalAssets[file] = additionalAssets[file] || []
-            if (!additionalAssets[file][index]) {
-              additionalAssets[file][index] = content
+          extractedFilesCache: new Map(),
+          getExtractedFile: (resource, { error } = {}) => {
+            const cache = mpx.extractedFilesCache.get(resource)
+            if (cache) return cache
+            const { resourcePath, queryObj } = parseRequest(resource)
+            const { type, isStatic, isPlugin } = queryObj
+            let file
+            if (isPlugin) {
+              file = 'plugin.json'
+            } else if (isStatic) {
+              const packageRoot = queryObj.packageRoot || ''
+              file = toPosix(path.join(packageRoot, mpx.getOutputPath(resourcePath, type, { ext: typeExtMap[type] })))
+            } else {
+              const appInfo = mpx.appInfo
+              const pagesMap = mpx.pagesMap
+              const packageName = queryObj.packageRoot || mpx.currentPackageRoot || 'main'
+              const componentsMap = mpx.componentsMap[packageName]
+              let filename = resourcePath === appInfo.resourcePath ? appInfo.name : (pagesMap[resourcePath] || componentsMap[resourcePath])
+              if (!filename) {
+                error && error(new Error('Get extracted file error: missing filename!'))
+                filename = 'missing-filename'
+              }
+              file = filename + typeExtMap[type]
+            }
+            mpx.extractedFilesCache.set(resource, file)
+            return file
+          },
+          recordResourceMap: ({ resourcePath, resourceType, outputPath, packageRoot = '', recordOnly, warn, error }) => {
+            const packageName = packageRoot || 'main'
+            const resourceMap = mpx[`${resourceType}sMap`] || mpx.otherResourcesMap
+            const currentResourceMap = resourceMap.main ? resourceMap[packageName] = resourceMap[packageName] || {} : resourceMap
+            let alreadyOutputted = false
+            if (outputPath) {
+              if (!currentResourceMap[resourcePath] || currentResourceMap[resourcePath] === true) {
+                if (!recordOnly) {
+                  // 在非recordOnly的模式下，进行输出路径冲突检测，如果存在输出路径冲突，则对输出路径进行重命名
+                  for (let key in currentResourceMap) {
+                    // todo 用outputPathMap来检测输出路径冲突
+                    if (currentResourceMap[key] === outputPath && key !== resourcePath) {
+                      outputPath = mpx.getOutputPath(resourcePath, resourceType, { conflictPath: outputPath })
+                      warn && warn(new Error(`Current ${resourceType} [${resourcePath}] is registered with conflicted outputPath [${currentResourceMap[key]}] which is already existed in system, will be renamed with [${outputPath}], use ?resolve to get the real outputPath!`))
+                      break
+                    }
+                  }
+                }
+                currentResourceMap[resourcePath] = outputPath
+              } else {
+                if (currentResourceMap[resourcePath] === outputPath) {
+                  alreadyOutputted = true
+                } else {
+                  error && error(new Error(`Current ${resourceType} [${resourcePath}] is already registered with outputPath [${currentResourceMap[resourcePath]}], you can not register it with another outputPath [${outputPath}]!`))
+                }
+              }
+            } else if (!currentResourceMap[resourcePath]) {
+              currentResourceMap[resourcePath] = true
+            }
+
+            return {
+              outputPath,
+              alreadyOutputted
             }
-            sideEffects && sideEffects.forEach((sideEffect) => {
-              sideEffect(additionalAssets)
-            })
           },
           // 组件和静态资源的输出规则如下：
           // 1. 主包引用的资源输出至主包
           // 2. 分包引用且主包引用过的资源输出至主包，不在当前分包重复输出
           // 3. 分包引用且无其他包引用的资源输出至当前分包
           // 4. 分包引用且其他分包也引用过的资源，重复输出至当前分包
-          getPackageInfo: ({ resource, outputPath, resourceType = 'components', issuerResource, warn }) => {
+          getPackageInfo: ({ resource, resourceType, outputPath, issuerResource, warn, error }) => {
             let packageRoot = ''
             let packageName = 'main'
-            const resourceMap = mpx[`${resourceType}Map`]
-            const { queryObj, resourcePath } = parseRequest(resource)
-            if (resourceType === 'staticResources' && outputPath) {
-              packageRoot = queryObj.packageRoot || ''
-              packageName = packageRoot || 'main'
+
+            const { resourcePath } = parseRequest(resource)
+            const currentPackageRoot = mpx.currentPackageRoot
+            const currentPackageName = currentPackageRoot || 'main'
+            const isIndependent = !!mpx.independentSubpackagesMap[currentPackageRoot]
+            const resourceMap = mpx[`${resourceType}sMap`] || mpx.otherResourcesMap
+
+            if (!resourceMap.main) {
+              packageRoot = currentPackageRoot
+              packageName = currentPackageName
             } else {
-              const currentPackageRoot = mpx.currentPackageRoot
-              const currentPackageName = currentPackageRoot || 'main'
-              const isIndependent = mpx.independentSubpackagesMap[currentPackageRoot]
               // 主包中有引用一律使用主包中资源，不再额外输出
               // 资源路径匹配到forceMainPackageRules规则时强制输出到主包，降低分包资源冗余
               // 如果存在issuer且issuerPackageRoot与当前packageRoot不一致，也输出到主包
+              // todo forceMainPackageRules规则目前只能处理当前资源，不能处理资源子树，配置不当有可能会导致资源引用错误
               let isMain = resourceMap.main[resourcePath] || matchCondition(resourcePath, this.options.forceMainPackageRules)
               if (issuerResource) {
                 const { queryObj } = parseRequest(issuerResource)
@@ -538,50 +698,36 @@ class MpxWebpackPlugin {
                   isMain = true
                 }
               }
-              // todo forceMainPackageRules规则目前只能处理当前资源，不能处理资源子树，配置不当有可能会导致资源引用错误
               if (!isMain || isIndependent) {
                 packageRoot = currentPackageRoot
                 packageName = currentPackageName
-                if (this.options.auditResource && resourceType !== 'subpackageModules' && !isIndependent) {
-                  if (this.options.auditResource !== 'component' || resourceType === 'components') {
+                if (this.options.auditResource && resourceType !== 'subpackageModule' && !isIndependent) {
+                  if (this.options.auditResource !== 'component' || resourceType === 'component') {
                     Object.keys(resourceMap).filter(key => key !== 'main').forEach((key) => {
                       if (resourceMap[key][resourcePath] && key !== packageName) {
-                        warn && warn(new Error(`当前${resourceType === 'components' ? '组件' : '静态'}资源${resourcePath}在分包${key}和分包${packageName}中都有引用，会分别输出到两个分包中，为了总体积最优，可以在主包中建立引用声明以消除资源输出冗余！`))
+                        warn && warn(new Error(`当前${resourceType === 'component' ? '组件' : '静态'}资源${resourcePath}在分包${key}和分包${packageName}中都有引用，会分别输出到两个分包中，为了总体积最优，可以在主包中建立引用声明以消除资源输出冗余！`))
                       }
                     })
                   }
                 }
               }
+              resourceMap[packageName] = resourceMap[packageName] || {}
             }
 
-            resourceMap[packageName] = resourceMap[packageName] || {}
-            const currentResourceMap = resourceMap[packageName]
-
-            let alreadyOutputed = false
-            if (outputPath) {
-              outputPath = toPosix(path.join(packageRoot, outputPath))
-              // 如果之前已经进行过输出，则不需要重复进行
-              if (currentResourceMap[resourcePath] === outputPath) {
-                alreadyOutputed = true
-              } else {
-                for (let key in currentResourceMap) {
-                  if (currentResourceMap[key] === outputPath && key !== resourcePath) {
-                    outputPath = toPosix(path.join(packageRoot, mpx.getOutputPath(resourcePath, resourceType, { conflictPath: outputPath })))
-                    warn && warn(new Error(`Current ${resourceType} [${resourcePath}] is registered with a conflict outputPath [${currentResourceMap[key]}] which is already existed in system, will be renamed with [${outputPath}], use ?resolve to get the real outputPath!`))
-                    break
-                  }
-                }
-                currentResourceMap[resourcePath] = outputPath
-              }
-            } else if (!currentResourceMap[resourcePath]) {
-              currentResourceMap[resourcePath] = true
-            }
+            if (outputPath) outputPath = toPosix(path.join(packageRoot, outputPath))
 
             return {
               packageName,
               packageRoot,
-              outputPath,
-              alreadyOutputed
+              // 返回outputPath及alreadyOutputted
+              ...mpx.recordResourceMap({
+                resourcePath,
+                resourceType,
+                outputPath,
+                packageRoot,
+                warn,
+                error
+              })
             }
           }
         }
@@ -589,18 +735,110 @@ class MpxWebpackPlugin {
 
       const rawProcessModuleDependencies = compilation.processModuleDependencies
       compilation.processModuleDependencies = (module, callback) => {
+        const presentationalDependencies = module.presentationalDependencies || []
+        async.forEach(presentationalDependencies.filter((dep) => dep.mpxAction), (dep, callback) => {
+          dep.mpxAction(module, compilation, callback)
+        }, (err) => {
+          rawProcessModuleDependencies.call(compilation, module, (innerErr) => {
+            return callback(err || innerErr)
+          })
+        })
+      }
+
+      const rawFactorizeModule = compilation.factorizeModule
+      compilation.factorizeModule = (options, callback) => {
+        const originModule = options.originModule
         let proxyedCallback = callback
-        if (module.rawRequest === mpx.appScriptRawRequest) {
-          // 避免模块request重名，只对第一次匹配到的模块进行代理
-          mpx.appScriptRawRequest = ''
-          proxyedCallback = (err) => {
-            mpx.appScriptPromiseResolve()
-            return callback(err)
+        if (originModule) {
+          proxyedCallback = (err, module) => {
+            // 避免selfModuleFactory的情况
+            if (module && module !== originModule) {
+              module.issuerResource = originModule.resource
+            }
+            return callback(err, module)
           }
         }
-        return rawProcessModuleDependencies.apply(compilation, [module, proxyedCallback])
+        return rawFactorizeModule.call(compilation, options, proxyedCallback)
       }
 
+      // 处理watch时缓存模块中的buildInfo
+      // 在调用addModule前对module添加分包信息，以控制分包输出及消除缓存，该操作由afterResolve钩子迁移至此是由于dependencyCache的存在，watch状态下afterResolve钩子并不会对所有模块执行，而模块的packageName在watch过程中是可能发生变更的，如新增删除一个分包资源的主包引用
+      const rawAddModule = compilation.addModule
+      compilation.addModule = (module, callback) => {
+        const issuerResource = module.issuerResource
+        const currentPackageRoot = mpx.currentPackageRoot
+        const independent = mpx.independentSubpackagesMap[currentPackageRoot]
+
+        if (module.resource) {
+          // NormalModule
+          const isStatic = isStaticModule(module)
+
+          let needPackageQuery = isStatic || independent
+
+          if (!needPackageQuery) {
+            const { resourcePath } = parseRequest(module.resource)
+            needPackageQuery = matchCondition(resourcePath, this.options.subpackageModulesRules)
+          }
+
+          if (needPackageQuery) {
+            const { packageRoot } = mpx.getPackageInfo({
+              resource: module.resource,
+              resourceType: isStatic ? 'staticResource' : 'subpackageModule',
+              issuerResource,
+              warn (e) {
+                compilation.warnings.push(e)
+              },
+              error (e) {
+                compilation.errors.push(e)
+              }
+            })
+            if (packageRoot) {
+              const queryObj = {
+                packageRoot
+              }
+              if (independent) queryObj.independent = independent
+              module.request = addQuery(module.request, queryObj)
+              module.resource = addQuery(module.resource, queryObj)
+            }
+          }
+        } else if (independent) {
+          // ContextModule/RawModule/ExternalModule等只在独立分包的情况下添加分包标记，其余默认不添加
+          const hackModuleIdentifier = (module) => {
+            const postfix = `|independent=${independent}|${currentPackageRoot}`
+            const rawIdentifier = module.identifier
+            if (rawIdentifier && !rawIdentifier.__mpxHacked) {
+              module.identifier = () => {
+                return rawIdentifier.call(module) + postfix
+              }
+              module.identifier.__mpxHacked = true
+            }
+          }
+          hackModuleIdentifier(module)
+          const rawCallback = callback
+          callback = (err, module) => {
+            // 因为文件缓存的存在，前面hack identifier的行为对于从文件缓存中创建得到的module并不生效，因此需要在回调中进行二次hack处理
+            if (err) return rawCallback(err)
+            hackModuleIdentifier(module)
+            rawCallback(null, module)
+          }
+        }
+        return rawAddModule.call(compilation, module, callback)
+      }
+
+      const rawEmitAsset = compilation.emitAsset
+
+      compilation.emitAsset = (file, source, assetInfo) => {
+        if (assetInfo && assetInfo.skipEmit) return
+        return rawEmitAsset.call(compilation, file, source, assetInfo)
+      }
+
+      compilation.hooks.succeedModule.tap('MpxWebpackPlugin', (module) => {
+        // 静态资源模块由于输出结果的动态性，通过importModule会合并asset的特性，通过emitFile传递信息禁用父级extractor的缓存来保障父级的importModule每次都能被执行
+        if (isStaticModule(module)) {
+          emitFile(module, MPX_DISABLE_EXTRACTOR_CACHE, '', undefined, { skipEmit: true })
+        }
+      })
+
       compilation.hooks.finishModules.tap('MpxWebpackPlugin', (modules) => {
         // 自动跟进分包配置修改splitChunksPlugin配置
         if (splitChunksPlugin) {
@@ -612,45 +850,15 @@ class MpxWebpackPlugin {
             }
           })
           if (needInit) {
-            splitChunksPlugin.options = SplitChunksPlugin.normalizeOptions(splitChunksOptions)
+            splitChunksPlugin.options = new SplitChunksPlugin(splitChunksOptions).options
           }
         }
       })
 
-      compilation.hooks.optimizeModules.tap('MpxWebpackPlugin', (modules) => {
-        modules.forEach((module) => {
-          if (module.needRemove) {
-            let removed = false
-            module.reasons.forEach((reason) => {
-              if (reason.module) {
-                if (reason.dependency instanceof HarmonyImportSideEffectDependency) {
-                  reason.module.removeDependency(reason.dependency)
-                  reason.module.addDependency(new RemovedModuleDependency(reason.dependency.request, module))
-                  removed = true
-                } else if (reason.dependency instanceof CommonJsRequireDependency && reason.dependency.loc.range) {
-                  let index = reason.module.dependencies.indexOf(reason.dependency)
-                  if (index > -1 && reason.module.dependencies[index + 1] instanceof RequireHeaderDependency) {
-                    reason.module.dependencies.splice(index, 2)
-                    reason.module.addDependency(new RemovedModuleDependency(reason.dependency.request, module, reason.dependency.loc.range))
-                    removed = true
-                  }
-                }
-              }
-            })
-            if (removed) {
-              module.chunksIterable.forEach((chunk) => {
-                module.removeChunk(chunk)
-              })
-              module.disconnect()
-            }
-          }
-        })
-      })
-
-      compilation.moduleTemplates.javascript.hooks.content.tap('MpxWebpackPlugin', (source, module, options) => {
+      JavascriptModulesPlugin.getCompilationHooks(compilation).renderModuleContent.tap('MpxWebpackPlugin', (source, module, renderContext) => {
         // 处理dll产生的external模块
         if (module.external && module.userRequest.startsWith('dll-reference ') && mpx.mode !== 'web') {
-          const chunk = options.chunk
+          const chunk = renderContext.chunk
           const request = module.request
           let relativePath = toPosix(path.relative(path.dirname(chunk.name), request))
           if (!/^\.\.?\//.test(relativePath)) relativePath = './' + relativePath
@@ -661,133 +869,141 @@ class MpxWebpackPlugin {
         return source
       })
 
-      compilation.hooks.additionalAssets.tapAsync('MpxWebpackPlugin', (callback) => {
-        for (let file in additionalAssets) {
-          let content = new ConcatSource()
-          if (additionalAssets[file].prefix) {
-            additionalAssets[file].prefix.forEach((item) => {
-              if (item) content.add(item)
-            })
-          }
-          additionalAssets[file].forEach((item) => {
-            if (item) content.add(item)
-          })
-          const modules = (additionalAssets[file].modules || []).concat(additionalAssets[file].relativeModules || [])
+      JavascriptModulesPlugin.getCompilationHooks(compilation).renderStartup.tap('MpxWebpackPlugin', (source, module) => {
+        if (module && mpx.exportModules.has(module)) {
+          source = new ConcatSource(source)
+          source.add('module.exports = __webpack_exports__;\n')
+        }
+        return source
+      })
 
-          if (modules.length > 1) {
-            // 同步relativeModules和modules之间的依赖
-            const fileDependencies = new Set()
-            const contextDependencies = new Set()
+      compilation.hooks.moduleAsset.tap('MpxWebpackPlugin', (module, filename) => {
+        const modules = mpx.assetsModulesMap.get(filename) || new Set()
+        modules.add(module)
+        mpx.assetsModulesMap.set(filename, modules)
+      })
 
-            modules.forEach((module) => {
-              module.buildInfo.fileDependencies.forEach((fileDependency) => {
-                fileDependencies.add(fileDependency)
-              })
-              module.buildInfo.contextDependencies.forEach((contextDependency) => {
-                contextDependencies.add(contextDependency)
-              })
-              module.buildInfo.fileDependencies = fileDependencies
-              module.buildInfo.contextDependencies = contextDependencies
-            })
+      const fillExtractedAssetsMap = (assetsMap, { index, content }, filename) => {
+        if (assetsMap.has(index)) {
+          if (assetsMap.get(index) !== content) {
+            compilation.errors.push(new Error(`The extracted file [${filename}] is filled with same index [${index}] and different content:
+            old content: ${assetsMap.get(index)}
+            new content: ${content}
+            please check!`))
           }
-          compilation.emitAsset(file, content, { modules: additionalAssets[file].modules })
+        } else {
+          assetsMap.set(index, content)
         }
-        // 所有编译的静态资源assetsInfo合入主编译
-        mpx.assetsInfo.forEach((assetInfo, name) => {
-          const oldAssetInfo = compilation.assetsInfo.get(name)
-          if (oldAssetInfo && oldAssetInfo.modules) {
-            assetInfo.modules = assetInfo.modules.concat(oldAssetInfo.modules)
+      }
+
+      const sortExtractedAssetsMap = (assetsMap) => {
+        return [...assetsMap.entries()].sort((a, b) => a[0] - b[0]).map(item => item[1])
+      }
+
+      compilation.hooks.beforeModuleAssets.tap('MpxWebpackPlugin', () => {
+        const extractedAssetsMap = new Map()
+        for (const module of compilation.modules) {
+          const assetsInfo = module.buildInfo.assetsInfo || new Map()
+          for (const [filename, { extractedInfo } = {}] of assetsInfo) {
+            if (extractedInfo) {
+              let extractedAssets = extractedAssetsMap.get(filename)
+              if (!extractedAssets) {
+                extractedAssets = [new Map(), new Map()]
+                extractedAssetsMap.set(filename, extractedAssets)
+              }
+              fillExtractedAssetsMap(extractedInfo.pre ? extractedAssets[0] : extractedAssets[1], extractedInfo, filename)
+              compilation.hooks.moduleAsset.call(module, filename)
+            }
           }
-          compilation.assetsInfo.set(name, assetInfo)
-        })
-        // 链接主编译模块与子编译入口
-        Object.values(mpx.wxsMap).concat(Object.values(mpx.extractedMap)).forEach((item) => {
-          item.modules.forEach((module) => {
-            module.addDependency(item.dep)
-          })
-        })
+        }
 
-        callback()
+        for (const [filename, [pre, normal]] of extractedAssetsMap) {
+          const sortedExtractedAssets = [...sortExtractedAssetsMap(pre), ...sortExtractedAssetsMap(normal)]
+          const source = new ConcatSource()
+          sortedExtractedAssets.forEach((content) => {
+            if (content) {
+              // 处理replace path
+              if (/"mpx_replace_path_.*?"/.test(content)) {
+                content = content.replace(/"mpx_replace_path_(.*?)"/g, (matched, key) => {
+                  return JSON.stringify(mpx.replacePathMap[key] || 'missing replace path')
+                })
+              }
+              source.add(content)
+            }
+          })
+          compilation.emitAsset(filename, source)
+        }
       })
 
       normalModuleFactory.hooks.parser.for('javascript/auto').tap('MpxWebpackPlugin', (parser) => {
-        // hack预处理，将expr.range写入loc中便于在CommonJsRequireDependency中获取，移除无效require
-        parser.hooks.call.for('require').tap({ name: 'MpxWebpackPlugin', stage: -100 }, (expr) => {
-          expr.loc.range = expr.range
-        })
-
         parser.hooks.call.for('__mpx_resolve_path__').tap('MpxWebpackPlugin', (expr) => {
           if (expr.arguments[0]) {
             const resource = expr.arguments[0].value
-            const { queryObj } = parseRequest(resource)
-            const packageName = queryObj.packageRoot || 'main'
-            const pagesMap = mpx.pagesMap
-            const componentsMap = mpx.componentsMap
-            const staticResourcesMap = mpx.staticResourcesMap
+            const packageName = mpx.currentPackageRoot || 'main'
+            const issuerResource = moduleGraph.getIssuer(parser.state.module).resource
             const range = expr.range
-            const issuerResource = parser.state.module.issuer.resource
-            const dep = new ResolveDependency(resource, packageName, pagesMap, componentsMap, staticResourcesMap, publicPath, range, issuerResource, compilation)
-            parser.state.current.addDependency(dep)
+            const dep = new ResolveDependency(resource, packageName, issuerResource, range)
+            parser.state.current.addPresentationalDependency(dep)
             return true
           }
         })
 
-        const transHandler = (expr) => {
-          const module = parser.state.module
-          const current = parser.state.current
-          const { queryObj, resourcePath } = parseRequest(module.resource)
-          const localSrcMode = queryObj.mode
-          const globalSrcMode = mpx.srcMode
-          const srcMode = localSrcMode || globalSrcMode
-          const mode = mpx.mode
-
-          let target
-
-          if (expr.type === 'Identifier') {
-            target = expr
-          } else if (expr.type === 'MemberExpression') {
-            target = expr.object
-          }
-          if (!matchCondition(resourcePath, this.options.transMpxRules) || resourcePath.indexOf('@mpxjs') !== -1 || !target || mode === srcMode) {
-            return
-          }
-
-          const type = target.name
-
-          const name = type === 'wx' ? 'mpx' : 'createFactory'
-          const replaceContent = type === 'wx' ? '__webpack_require__.n(mpx)()' : `__webpack_require__.n(createFactory)()(${JSON.stringify(type)})`
-
-          const dep = new ReplaceDependency(replaceContent, target.range)
-          current.addDependency(dep)
+        parser.hooks.call.for('__mpx_dynamic_entry__').tap('MpxWebpackPlugin', (expr) => {
+          const args = expr.arguments.map((i) => i.value)
+          args.push(expr.range)
+          const dep = new DynamicEntryDependency(...args)
+          parser.state.current.addPresentationalDependency(dep)
+          return true
+        })
 
-          let needInject = true
-          for (let v of module.variables) {
-            if (v.name === name) {
-              needInject = false
-              break
+        const requireAsyncHandler = (expr, members) => {
+          if (members[0] === 'async') {
+            let request = expr.arguments[0].value
+            const range = expr.arguments[0].range
+            const context = parser.state.module.context
+            const { queryObj } = parseRequest(request)
+            if (queryObj.root) {
+              // 删除root query
+              request = addQuery(request, {}, false, ['root'])
+              // 目前仅wx支持require.async，其余平台使用CommonJsAsyncDependency进行模拟抹平
+              if (mpx.mode === 'wx') {
+                const dep = new DynamicEntryDependency(request, 'export', '', queryObj.root, MPX_CURRENT_CHUNK, context, range)
+                parser.state.current.addPresentationalDependency(dep)
+                // 包含require.async的模块不能被concatenate，避免DynamicEntryDependency中无法获取模块chunk以计算相对路径
+                parser.state.module.buildInfo.moduleConcatenationBailout = 'require async'
+              } else {
+                const range = expr.range
+                const dep = new CommonJsAsyncDependency(request, range)
+                parser.state.current.addDependency(dep)
+              }
+              return true
+            } else {
+              compilation.errors.push(new Error(`The require async JS [${request}] need to declare subpackage name by root`))
+              return true
             }
           }
-          if (needInject) {
-            const expression = `require(${JSON.stringify(`@mpxjs/core/src/runtime/${name}`)})`
-            const deps = []
-            parser.parse(expression, {
-              current: {
-                addDependency: dep => {
-                  dep.userRequest = name
-                  deps.push(dep)
-                }
-              },
-              module
-            })
-            module.addVariable(name, expression, deps)
-          }
         }
+
+        parser.hooks.callMemberChain
+          .for('require')
+          .tap({
+            name: 'MpxWebpackPlugin',
+            stage: -1000
+          }, (expr, members) => requireAsyncHandler(expr, members))
+
+        parser.hooks.callMemberChainOfCallMemberChain
+          .for('require')
+          .tap({
+            name: 'MpxWebpackPlugin',
+            stage: -1000
+          }, (expr, calleeMembers, callExpr) => requireAsyncHandler(callExpr, calleeMembers))
+
         // hack babel polyfill global
         parser.hooks.statementIf.tap('MpxWebpackPlugin', (expr) => {
           if (/core-js.+microtask/.test(parser.state.module.resource)) {
             if (expr.test.left && (expr.test.left.name === 'Observer' || expr.test.left.name === 'MutationObserver')) {
               const current = parser.state.current
-              current.addDependency(new InjectDependency({
+              current.addPresentationalDependency(new InjectDependency({
                 content: 'document && ',
                 index: expr.test.range[0]
               }))
@@ -803,7 +1019,7 @@ class MpxWebpackPlugin {
           // todo 该逻辑在corejs3中不需要，等corejs3比较普及之后可以干掉
           if (/core-js.+global/.test(parser.state.module.resource)) {
             if (callee.name === 'Function' && arg0 && arg0.value === 'return this') {
-              current.addDependency(new InjectDependency({
+              current.addPresentationalDependency(new InjectDependency({
                 content: '(function() { return this })() || ',
                 index: expr.range[0]
               }))
@@ -811,102 +1027,169 @@ class MpxWebpackPlugin {
           }
           if (/regenerator-runtime/.test(parser.state.module.resource)) {
             if (callee.name === 'Function' && arg0 && arg0.value === 'r' && arg1 && arg1.value === 'regeneratorRuntime = r') {
-              current.addDependency(new ReplaceDependency('(function () {})', expr.range))
+              current.addPresentationalDependency(new ReplaceDependency('(function () {})', expr.range))
             }
           }
         })
 
+        // processing for tenon-store
+        if (mpx.mode === 'tenon') {
+          let TENON_STORE_ID = 0
+          parser.hooks.call.for('imported var').tap('MpxWebpackPlugin', (expr) => {
+            if (['createStore', 'createStoreWithThis'].includes(expr.callee.name)) {
+              const current = parser.state.current
+              const storeOptions = expr.arguments.length && expr.arguments[0]
+              if (storeOptions) {
+                current.addDependency(new InjectDependency({
+                  content: 'Object.assign(',
+                  index: storeOptions.range[0]
+                }))
+                current.addDependency(new InjectDependency({
+                  content: `, { __store_id: ${TENON_STORE_ID++} })`,
+                  index: storeOptions.range[1]
+                }))
+              }
+            }
+          })
+        }
+
         if (mpx.srcMode !== mpx.mode) {
-          // 全量替换未声明的wx identifier
-          parser.hooks.expression.for('wx').tap('MpxWebpackPlugin', transHandler)
-
-          // parser.hooks.evaluate.for('MemberExpression').tap('MpxWebpackPlugin', (expr) => {
-          //   // Undeclared varible for wx[identifier]()
-          //   // TODO Unable to handle wx[identifier]
-          //   if (expr.object.name === 'wx' && !parser.scope.definitions.has('wx')) {
-          //     transHandler(expr)
-          //   }
-          // })
-          // // Trans for wx.xx, wx['xx'], wx.xx(), wx['xx']()
-          // parser.hooks.expressionAnyMember.for('wx').tap('MpxWebpackPlugin', transHandler)
+          // 处理跨平台全局对象转换
+          const transGlobalObject = (expr) => {
+            const module = parser.state.module
+            const current = parser.state.current
+            const { queryObj, resourcePath } = parseRequest(module.resource)
+            const localSrcMode = queryObj.mode
+            const globalSrcMode = mpx.srcMode
+            const srcMode = localSrcMode || globalSrcMode
+            const mode = mpx.mode
+
+            let target
+            if (expr.type === 'Identifier') {
+              target = expr
+            } else if (expr.type === 'MemberExpression') {
+              target = expr.object
+            }
+
+            if (!matchCondition(resourcePath, this.options.transMpxRules) || resourcePath.indexOf('@mpxjs') !== -1 || !target || mode === srcMode) return
+
+            const type = target.name
+            const name = type === 'wx' ? 'mpx' : 'createFactory'
+            const replaceContent = type === 'wx' ? 'mpx' : `createFactory(${JSON.stringify(type)})`
+
+            const dep = new ReplaceDependency(replaceContent, target.range)
+            current.addPresentationalDependency(dep)
+
+            let needInject = true
+            for (let dep of module.dependencies) {
+              if (dep instanceof CommonJsVariableDependency && dep.name === name) {
+                needInject = false
+                break
+              }
+            }
+            if (needInject) {
+              const dep = new CommonJsVariableDependency(`@mpxjs/core/src/runtime/${name}`, name)
+              module.addDependency(dep)
+            }
+          }
+
+          // 转换wx全局对象
+          parser.hooks.expression.for('wx').tap('MpxWebpackPlugin', transGlobalObject)
           // Proxy ctor for transMode
           if (!this.options.forceDisableProxyCtor) {
             parser.hooks.call.for('Page').tap('MpxWebpackPlugin', (expr) => {
-              transHandler(expr.callee)
+              transGlobalObject(expr.callee)
             })
             parser.hooks.call.for('Component').tap('MpxWebpackPlugin', (expr) => {
-              transHandler(expr.callee)
+              transGlobalObject(expr.callee)
             })
             parser.hooks.call.for('App').tap('MpxWebpackPlugin', (expr) => {
-              transHandler(expr.callee)
+              transGlobalObject(expr.callee)
             })
             if (mpx.mode === 'ali' || mpx.mode === 'web') {
               // 支付宝和web不支持Behaviors
               parser.hooks.call.for('Behavior').tap('MpxWebpackPlugin', (expr) => {
-                transHandler(expr.callee)
+                transGlobalObject(expr.callee)
               })
             }
           }
-        }
 
-        const apiBlackListMap = [
-          'createApp',
-          'createPage',
-          'createComponent',
-          'createStore',
-          'createStoreWithThis',
-          'mixin',
-          'injectMixins',
-          'toPureObject',
-          'observable',
-          'watch',
-          'use',
-          'set',
-          'remove',
-          'delete: del',
-          'setConvertRule',
-          'getMixin',
-          'getComputed',
-          'implement'
-        ].reduce((map, api) => {
-          map[api] = true
-          return map
-        }, {})
-
-        const handler = (expr) => {
-          const callee = expr.callee
-          const args = expr.arguments
-          const name = callee.object.name
-          const { queryObj, resourcePath } = parseRequest(parser.state.module.resource)
-          const localSrcMode = queryObj.mode
-          const globalSrcMode = mpx.srcMode
-          const srcMode = localSrcMode || globalSrcMode
-
-          if (srcMode === globalSrcMode || apiBlackListMap[callee.property.name || callee.property.value] || (name !== 'mpx' && name !== 'wx') || (name === 'wx' && !matchCondition(resourcePath, this.options.transMpxRules))) {
-            return
+          // 为跨平台api调用注入srcMode参数指导api运行时转换
+          const apiBlackListMap = [
+            'createApp',
+            'createPage',
+            'createComponent',
+            'createStore',
+            'createStoreWithThis',
+            'mixin',
+            'injectMixins',
+            'toPureObject',
+            'observable',
+            'watch',
+            'use',
+            'set',
+            'remove',
+            'delete',
+            'setConvertRule',
+            'getMixin',
+            'getComputed',
+            'implement'
+          ].reduce((map, api) => {
+            map[api] = true
+            return map
+          }, {})
+
+          const injectSrcModeForTransApi = (expr, members) => {
+            // members为空数组时，callee并不是memberExpression
+            if (!members.length) return
+            const callee = expr.callee
+            const args = expr.arguments
+            const name = callee.object.name
+            const { queryObj, resourcePath } = parseRequest(parser.state.module.resource)
+            const localSrcMode = queryObj.mode
+            const globalSrcMode = mpx.srcMode
+            const srcMode = localSrcMode || globalSrcMode
+
+            if (srcMode === globalSrcMode || apiBlackListMap[callee.property.name || callee.property.value] || (name !== 'mpx' && name !== 'wx') || (name === 'wx' && !matchCondition(resourcePath, this.options.transMpxRules))) return
+
+            const srcModeString = `__mpx_src_mode_${srcMode}__`
+            const dep = new InjectDependency({
+              content: args.length
+                ? `, ${JSON.stringify(srcModeString)}`
+                : JSON.stringify(srcModeString),
+              index: expr.end - 1
+            })
+            parser.state.current.addPresentationalDependency(dep)
           }
 
-          const srcModeString = `__mpx_src_mode_${srcMode}__`
-          const dep = new InjectDependency({
-            content: args.length
-              ? `, ${JSON.stringify(srcModeString)}`
-              : JSON.stringify(srcModeString),
-            index: expr.end - 1
-          })
-          parser.state.current.addDependency(dep)
+          parser.hooks.callMemberChain.for(harmonySpecifierTag).tap('MpxWebpackPlugin', injectSrcModeForTransApi)
+          parser.hooks.callMemberChain.for('mpx').tap('MpxWebpackPlugin', injectSrcModeForTransApi)
+          parser.hooks.callMemberChain.for('wx').tap('MpxWebpackPlugin', injectSrcModeForTransApi)
         }
+      })
 
-        if (mpx.srcMode !== mpx.mode) {
-          parser.hooks.callAnyMember.for('imported var').tap('MpxWebpackPlugin', handler)
-          parser.hooks.callAnyMember.for('mpx').tap('MpxWebpackPlugin', handler)
-          parser.hooks.callAnyMember.for('wx').tap('MpxWebpackPlugin', handler)
+      // 为了正确生成sourceMap，将该步骤由原来的compile.hooks.emit迁移到compilation.hooks.processAssets
+      compilation.hooks.processAssets.tap({
+        name: 'MpxWebpackPlugin',
+        stage: compilation.PROCESS_ASSETS_STAGE_ADDITIONS
+      }, () => {
+        if (mpx.mode === 'web') return
+
+        if (this.options.generateBuildMap) {
+          const pagesMap = compilation.__mpx__.pagesMap
+          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 filename = this.options.generateBuildMap.filename || 'outputMap.json'
+          compilation.assets[filename] = new RawSource(outputMap)
         }
-      })
 
-      // 为了正确生成sourceMap，将该步骤由原来的compile.hooks.emit迁移到compilation.hooks.optimizeChunkAssets中来
-      compilation.hooks.optimizeChunkAssets.tapAsync('MpxWebpackPlugin', (chunks, callback) => {
-        if (mpx.mode === 'web') return callback()
-        const jsonpFunction = compilation.outputOptions.jsonpFunction
+        const {
+          globalObject,
+          chunkLoadingGlobal
+        } = compilation.outputOptions
 
         function getTargetFile (file) {
           let targetFile = file
@@ -918,21 +1201,23 @@ class MpxWebpackPlugin {
         }
 
         const processedChunk = new Set()
-        const rootName = compilation._preparedEntrypoints[0].name
+        const appName = mpx.appInfo.name
 
         function processChunk (chunk, isRuntime, relativeChunks) {
-          if (!chunk.files[0] || processedChunk.has(chunk)) {
+          const chunkFile = chunk.files.values().next().value
+          if (!chunkFile || processedChunk.has(chunk)) {
             return
           }
 
-          let originalSource = compilation.assets[chunk.files[0]]
+          let originalSource = compilation.assets[chunkFile]
           const source = new ConcatSource()
-          source.add('\nvar window = window || {};\n\n')
+          source.add(`\nvar ${globalObject} = ${globalObject} || {};\n\n`)
 
           relativeChunks.forEach((relativeChunk, index) => {
-            if (!relativeChunk.files[0]) return
-            let chunkPath = getTargetFile(chunk.files[0])
-            let relativePath = getTargetFile(relativeChunk.files[0])
+            const relativeChunkFile = relativeChunk.files.values().next().value
+            if (!relativeChunkFile) return
+            let chunkPath = getTargetFile(chunkFile)
+            let relativePath = getTargetFile(relativeChunkFile)
             relativePath = path.relative(path.dirname(chunkPath), relativePath)
             relativePath = fixRelative(relativePath, mpx.mode)
             relativePath = toPosix(relativePath)
@@ -940,19 +1225,19 @@ class MpxWebpackPlugin {
               // 引用runtime
               // 支付宝分包独立打包，通过全局context获取webpackJSONP
               if (mpx.mode === 'ali' && !mpx.isPluginMode) {
-                if (chunk.name === rootName) {
-                  // 在rootChunk中挂载jsonpFunction
+                if (chunk.name === appName) {
+                  // 在rootChunk中挂载jsonpCallback
                   source.add('// process ali subpackages runtime in root chunk\n' +
                     'var context = (function() { return this })() || Function("return this")();\n\n')
-                  source.add(`context[${JSON.stringify(jsonpFunction)}] = window[${JSON.stringify(jsonpFunction)}] = require("${relativePath}");\n`)
+                  source.add(`context[${JSON.stringify(chunkLoadingGlobal)}] = ${globalObject}[${JSON.stringify(chunkLoadingGlobal)}] = require("${relativePath}");\n`)
                 } else {
                   // 其余chunk中通过context全局传递runtime
                   source.add('// process ali subpackages runtime in other chunk\n' +
                     'var context = (function() { return this })() || Function("return this")();\n\n')
-                  source.add(`window[${JSON.stringify(jsonpFunction)}] = context[${JSON.stringify(jsonpFunction)}];\n`)
+                  source.add(`${globalObject}[${JSON.stringify(chunkLoadingGlobal)}] = context[${JSON.stringify(chunkLoadingGlobal)}];\n`)
                 }
               } else {
-                source.add(`window[${JSON.stringify(jsonpFunction)}] = require("${relativePath}");\n`)
+                source.add(`${globalObject}[${JSON.stringify(chunkLoadingGlobal)}] = require("${relativePath}");\n`)
               }
             } else {
               source.add(`require("${relativePath}");\n`)
@@ -1005,18 +1290,12 @@ try {
 } catch(e){
 }\n`)
             source.add(originalSource)
-            source.add(`\nmodule.exports = window[${JSON.stringify(jsonpFunction)}];\n`)
+            source.add(`\nmodule.exports = ${globalObject}[${JSON.stringify(chunkLoadingGlobal)}];\n`)
           } else {
-            if (mpx.pluginMainModule && chunk.entryModule && mpx.pluginMainModule === chunk.entryModule) {
-              source.add('module.exports =\n')
-              // mpx.miniToPluginExports is a Set
-            } else if (mpx.miniToPluginModules && chunk.entryModule && mpx.miniToPluginModules.has(chunk.entryModule)) {
-              source.add('module.exports =\n')
-            }
             source.add(originalSource)
           }
 
-          compilation.assets[chunk.files[0]] = source
+          compilation.assets[chunkFile] = source
           processedChunk.add(chunk)
         }
 
@@ -1053,57 +1332,109 @@ try {
             }
           }
         })
-
-        callback()
       })
     })
 
     compiler.hooks.normalModuleFactory.tap('MpxWebpackPlugin', (normalModuleFactory) => {
       // resolve前修改原始request
-      normalModuleFactory.hooks.beforeResolve.tapAsync('MpxWebpackPlugin', (data, callback) => {
+      normalModuleFactory.hooks.beforeResolve.tap('MpxWebpackPlugin', (data) => {
         let request = data.request
         let { queryObj, resource } = parseRequest(request)
         if (queryObj.resolve) {
           // 此处的query用于将资源引用的当前包信息传递给resolveDependency
-          const pathLoader = normalize.lib('path-loader')
-          resource = addQuery(resource, {
-            packageRoot: mpx.currentPackageRoot
-          })
-          data.request = `!!${pathLoader}!${resource}`
-        } else if (queryObj.wxsModule) {
-          const wxsPreLoader = normalize.lib('wxs/wxs-pre-loader')
-          if (!/wxs-loader/.test(request)) {
-            data.request = `!!${wxsPreLoader}!${resource}`
-          }
+          const resolveLoaderPath = normalize.lib('resolve-loader')
+          data.request = `!!${resolveLoaderPath}!${resource}`
         }
-        callback(null, data)
       })
 
-      // resolve完成后修改loaders信息并批量添加mode query
-      normalModuleFactory.hooks.afterResolve.tapAsync('MpxWebpackPlugin', (data, callback) => {
-        if (data.loaders) {
-          const { queryObj } = parseRequest(data.request)
+      const typeLoaderProcessInfo = {
+        styles: ['css-loader', wxssLoaderPath, styleCompilerPath],
+        template: ['html-loader', wxmlLoaderPath, templateCompilerPath]
+      }
+
+      // 应用过rules后，注入mpx相关资源编译loader
+      normalModuleFactory.hooks.afterResolve.tap('MpxWebpackPlugin', ({ createData }) => {
+        const { queryObj } = parseRequest(createData.request)
+        const loaders = createData.loaders
+        if (queryObj.mpx && queryObj.mpx !== MPX_PROCESSED_FLAG) {
+          const type = queryObj.type
+          const extract = queryObj.extract
+          switch (type) {
+            case 'styles':
+            case 'template':
+              let insertBeforeIndex = -1
+              const info = typeLoaderProcessInfo[type]
+              loaders.forEach((loader, index) => {
+                const currentLoader = toPosix(loader.loader)
+                if (currentLoader.includes(info[0])) {
+                  loader.loader = info[1]
+                  insertBeforeIndex = index
+                } else if (currentLoader.includes(info[1])) {
+                  insertBeforeIndex = index
+                }
+              })
+              if (insertBeforeIndex > -1) {
+                loaders.splice(insertBeforeIndex + 1, 0, {
+                  loader: info[2]
+                })
+              }
+              break
+            case 'json':
+              if (queryObj.isTheme) {
+                loaders.unshift({
+                  loader: jsonThemeCompilerPath
+                })
+              } else if (queryObj.isPlugin) {
+                loaders.unshift({
+                  loader: jsonPluginCompilerPath
+                })
+              } else {
+                loaders.unshift({
+                  loader: jsonCompilerPath
+                })
+              }
+              break
+            case 'wxs':
+              loaders.unshift({
+                loader: wxsLoaderPath
+              })
+          }
+          if (extract) {
+            loaders.unshift({
+              loader: extractorPath
+            })
+          }
+          createData.resource = addQuery(createData.resource, { mpx: MPX_PROCESSED_FLAG }, true)
+        }
+
+        if (mpx.mode === 'web') {
           const mpxStyleOptions = queryObj.mpxStyleOptions
-          const firstLoader = (data.loaders[0] && data.loaders[0].loader) || ''
-          const isPitcherRequest = firstLoader.includes('vue-loader/lib/loaders/pitcher.js')
+          const firstLoader = loaders[0] ? toPosix(loaders[0].loader) : ''
+          const isPitcherRequest = firstLoader.includes('vue-loader/lib/loaders/pitcher') || firstLoader.includes('@hummer/tenon-loader/dist/pitcher.js')
           let cssLoaderIndex = -1
           let vueStyleLoaderIndex = -1
           let mpxStyleLoaderIndex = -1
-          data.loaders.forEach((loader, index) => {
-            const currentLoader = loader.loader
-            if (currentLoader.includes('ts-loader')) {
-              // todo 暂时固定写死options，待后续优化为复用rules后修正
-              loader.options = { appendTsSuffixTo: [/\.(mpx|vue)$/] }
-            }
+          let tenonStyleLoaderIndex = -1
+          loaders.forEach((loader, index) => {
+            const currentLoader = toPosix(loader.loader)
             if (currentLoader.includes('css-loader')) {
               cssLoaderIndex = index
-            } else if (currentLoader.includes('vue-loader/lib/loaders/stylePostLoader.js')) {
+            } else if (currentLoader.includes('vue-loader/lib/loaders/stylePostLoader')) {
               vueStyleLoaderIndex = index
-            } else if (currentLoader.includes('@mpxjs/webpack-plugin/lib/style-compiler/index.js')) {
+            } else if (currentLoader.includes('@hummer/tenon-style-loader/dist/index.js')) {
+              tenonStyleLoaderIndex = index
+            } else if (currentLoader.includes(styleCompilerPath)) {
               mpxStyleLoaderIndex = index
             }
           })
-          if (mpxStyleLoaderIndex === -1) {
+          if (mpx.mode === 'tenon' && mpxStyleLoaderIndex === -1) {
+            if (tenonStyleLoaderIndex > -1 && !isPitcherRequest) {
+              loaders.splice(tenonStyleLoaderIndex + 1, 0, {
+                loader: normalize.lib('style-compiler/index.js'),
+                options: (mpxStyleOptions && JSON.parse(mpxStyleOptions)) || {}
+              })
+            }
+          } else if (mpxStyleLoaderIndex === -1) {
             let loaderIndex = -1
             if (cssLoaderIndex > -1 && vueStyleLoaderIndex === -1) {
               loaderIndex = cssLoaderIndex
@@ -1111,37 +1442,70 @@ try {
               loaderIndex = vueStyleLoaderIndex
             }
             if (loaderIndex > -1) {
-              data.loaders.splice(loaderIndex + 1, 0, {
-                loader: normalize.lib('style-compiler/index.js'),
+              loaders.splice(loaderIndex + 1, 0, {
+                loader: styleCompilerPath,
                 options: (mpxStyleOptions && JSON.parse(mpxStyleOptions)) || {}
               })
             }
           }
         }
+
+        createData.request = stringifyLoadersAndResource(loaders, createData.resource)
         // 根据用户传入的modeRules对特定资源添加mode query
-        this.runModeRules(data)
-        callback(null, data)
+        this.runModeRules(createData)
       })
     })
 
-    compiler.hooks.emit.tapAsync('MpxWebpackPlugin', (compilation, callback) => {
-      if (this.options.generateBuildMap) {
-        const pagesMap = compilation.__mpx__.pagesMap
-        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 })
-        compilation.assets['../outputMap.json'] = {
-          source: () => {
-            return outputMap
-          },
-          size: () => {
-            return Buffer.byteLength(outputMap, 'utf8')
+    const clearFileCache = () => {
+      const fs = compiler.intermediateFileSystem
+      const cacheLocation = compiler.options.cache.cacheLocation
+      return new Promise((resolve) => {
+        if (!cacheLocation) return resolve()
+        if (typeof fs.rm === 'function') {
+          fs.rm(cacheLocation, {
+            recursive: true,
+            force: true
+          }, resolve)
+        } else {
+          // polyfill fs.rm
+          const rm = (file, callback) => {
+            async.waterfall([
+              (callback) => {
+                fs.stat(file, callback)
+              },
+              (stats, callback) => {
+                if (stats.isDirectory()) {
+                  const dir = file
+                  fs.readdir(dir, (err, files) => {
+                    if (err) return callback(err)
+                    async.each(files, (file, callback) => {
+                      file = path.join(dir, file)
+                      rm(file, callback)
+                    }, (err) => {
+                      if (err) return callback(err)
+                      fs.rmdir(dir, callback)
+                    })
+                  })
+                } else {
+                  fs.unlink(file, callback)
+                }
+              }
+            ], callback)
           }
+          rm(cacheLocation, resolve)
         }
+      })
+    }
+
+    compiler.hooks.done.tapPromise('MpxWebpackPlugin', async () => {
+      const cache = compiler.getCache('MpxWebpackPlugin')
+      const cacheIsValid = await cache.getPromise('cacheIsValid', null)
+      if (!cacheIsValid) {
+        await Promise.all([
+          clearFileCache(),
+          cache.storePromise('cacheIsValid', null, true)
+        ])
       }
-      callback()
     })
   }
 }