@mpxjs/webpack-plugin 2.6.114-alpha.8 → 2.6.115

package/lib/index.js

@@ -1,89 +1,68 @@
 'use strict'
 
 const path = require('path')
-const { ConcatSource, RawSource } = require('webpack').sources
-const ResolveDependency = require('./dependencies/ResolveDependency')
-const InjectDependency = require('./dependencies/InjectDependency')
-const ReplaceDependency = require('./dependencies/ReplaceDependency')
+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 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 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 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 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 = '/'
 
-const isChunkInPackage = (chunkName, packageName) => {
+function 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/
 }
@@ -92,9 +71,10 @@ const warnings = []
 const errors = []
 
 class EntryNode {
-  constructor (module, type) {
-    this.module = module
-    this.type = type
+  constructor (options) {
+    this.request = options.request
+    this.type = options.type
+    this.module = null
     this.parents = new Set()
     this.children = new Set()
   }
@@ -122,6 +102,7 @@ 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
@@ -143,8 +124,12 @@ 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
@@ -159,103 +144,31 @@ 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 = {}) {
-    if (options.transRpx) {
+    loaderOptions = options
+    if (loaderOptions.transRpx) {
       warnings.push('Mpx loader option [transRpx] is deprecated now, please use mpx webpack plugin config [transRpxRules] instead!')
     }
-    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
-    }
+    return { loader: normalize.lib('loader'), options }
   }
 
   static pluginLoader (options = {}) {
-    return {
-      loader: normalize.lib('json-compiler/plugin'),
-      options
-    }
+    return { loader: normalize.lib('plugin-loader'), options }
   }
 
   static wxsPreLoader (options = {}) {
-    return {
-      loader: normalize.lib('wxs/pre-loader'),
-      options
-    }
+    return { loader: normalize.lib('wxs/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
-    }
-  }
-
-  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'
-    })
+    return { loader: normalize.lib('file-loader'), options }
   }
 
   runModeRules (data) {
@@ -281,9 +194,6 @@ 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) {
@@ -299,11 +209,12 @@ 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-file', this.options.miniNpmPackages, 'file')
+    const packageEntryPlugin = new PackageEntryPlugin('before-described-relative', this.options.miniNpmPackages, 'resolve')
     if (Array.isArray(compiler.options.resolve.plugins)) {
       compiler.options.resolve.plugins.push(addModePlugin)
     } else {
@@ -313,14 +224,12 @@ 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' && this.options.mode !== 'tenon') {
-      const optimization = compiler.options.optimization
-      optimization.runtimeChunk = {
+    if (this.options.mode !== 'web') {
+      compiler.options.optimization.runtimeChunk = {
         name: (entrypoint) => {
           for (let packageName in mpx.independentSubpackagesMap) {
             if (mpx.independentSubpackagesMap.hasOwnProperty(packageName) && isChunkInPackage(entrypoint.name, packageName)) {
@@ -330,18 +239,8 @@ class MpxWebpackPlugin {
           return 'bundle'
         }
       }
-      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
+      splitChunksOptions = compiler.options.optimization.splitChunks
+      delete compiler.options.optimization.splitChunks
       splitChunksPlugin = new SplitChunksPlugin(splitChunksOptions)
       splitChunksPlugin.apply(compiler)
     }
@@ -359,11 +258,8 @@ 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)
@@ -381,92 +277,12 @@ 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 }) => {
-      NormalModule.getCompilationHooks(compilation).loader.tap('MpxWebpackPlugin', (loaderContext) => {
+      compilation.hooks.normalModuleLoader.tap('MpxWebpackPlugin', (loaderContext, module) => {
         // 设置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())
@@ -477,92 +293,161 @@ class MpxWebpackPlugin {
       compilation.dependencyFactories.set(ReplaceDependency, new NullFactory())
       compilation.dependencyTemplates.set(ReplaceDependency, new ReplaceDependency.Template())
 
-      compilation.dependencyFactories.set(AppEntryDependency, new NullFactory())
-      compilation.dependencyTemplates.set(AppEntryDependency, new AppEntryDependency.Template())
-
-      compilation.dependencyFactories.set(DynamicEntryDependency, new NullFactory())
-      compilation.dependencyTemplates.set(DynamicEntryDependency, new DynamicEntryDependency.Template())
-
-      compilation.dependencyFactories.set(FlagPluginDependency, new NullFactory())
-      compilation.dependencyTemplates.set(FlagPluginDependency, new FlagPluginDependency.Template())
-
-      compilation.dependencyFactories.set(RemoveEntryDependency, new NullFactory())
-      compilation.dependencyTemplates.set(RemoveEntryDependency, new RemoveEntryDependency.Template())
-
-      compilation.dependencyFactories.set(RecordResourceMapDependency, new NullFactory())
-      compilation.dependencyTemplates.set(RecordResourceMapDependency, new RecordResourceMapDependency.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(RecordGlobalComponentsDependency, new NullFactory())
-      compilation.dependencyTemplates.set(RecordGlobalComponentsDependency, new RecordGlobalComponentsDependency.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(RecordIndependentDependency, new NullFactory())
-      compilation.dependencyTemplates.set(RecordIndependentDependency, new RecordIndependentDependency.Template())
+          let needPackageQuery = isStatic || isIndependent
+          if (!needPackageQuery && matchCondition(resourcePath, this.options.subpackageModulesRules)) {
+            needPackageQuery = true
+          }
 
-      compilation.dependencyFactories.set(CommonJsVariableDependency, normalModuleFactory)
-      compilation.dependencyTemplates.set(CommonJsVariableDependency, new CommonJsVariableDependency.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(CommonJsAsyncDependency, normalModuleFactory)
-      compilation.dependencyTemplates.set(CommonJsAsyncDependency, new CommonJsAsyncDependency.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
+      }
     })
 
     compiler.hooks.thisCompilation.tap('MpxWebpackPlugin', (compilation, { normalModuleFactory }) => {
       compilation.warnings = compilation.warnings.concat(warnings)
       compilation.errors = compilation.errors.concat(errors)
-      const moduleGraph = compilation.moduleGraph
+      // additionalAssets和mpx由于包含缓存机制，必须在每次compilation时重新初始化
+      const additionalAssets = {}
       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模块分包归属，用于js多分包冗余输出
+          // 用于记录命中subpackageModulesRules的js模块最终输出到了什么分包中
           subpackageModulesMap: {
             main: {}
           },
-          // 记录其他资源，如pluginMain、pluginExport，无需区分主包分包
-          otherResourcesMap: {},
           // 记录独立分包
           independentSubpackagesMap: {},
-          subpackagesEntriesMap: {},
-          replacePathMap: {},
-          exportModules: new Set(),
+          // 当前机制下分包处理队列在app.json的json-compiler中进行，由于addEntry回调特性，无法保障app.js中引用的模块都被标记为主包，故重写processModuleDependencies获取app.js及其所有依赖处理完成的时机，在这之后再执行分包处理队列
+          appScriptRawRequest: '',
+          appScriptPromise: null,
+          appScriptPromiseResolve: null,
+          // 记录entry依赖关系，用于体积分析
+          entryNodesMap: {},
           // 记录entryModule与entryNode的对应关系，用于体积分析
-          entryNodeModulesMap: new Map(),
-          // 记录与asset相关联的modules，用于体积分析
-          assetsModulesMap: new Map(),
-          // 记录与asset相关联的ast，用于体积分析和esCheck，避免重复parse
-          assetsASTsMap: new Map(),
+          entryModulesMap: new Map(),
+          loaderOptions,
+          extractedMap: {},
           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文件专用配置
-          nativeConfig: this.options.nativeConfig,
-          // 输出web专用配置
-          webConfig: this.options.webConfig,
+          // native文件专用相关配置
+          nativeOptions: this.options.nativeOptions,
           tabBarMap: {},
           defs: preProcessDefs(this.options.defs),
           i18n: this.options.i18n,
@@ -574,121 +459,76 @@ class MpxWebpackPlugin {
           useRelativePath: this.options.useRelativePath,
           removedChunks: [],
           forceProxyEventRules: this.options.forceProxyEventRules,
-          proxyComponentEventsRules: this.options.proxyComponentEventsRules,
-          pathHash: (resourcePath) => {
-            if (this.options.pathHashMode === 'relative' && this.options.projectRoot) {
-              return hash(path.relative(this.options.projectRoot, resourcePath))
+          getEntryNode: (request, type, module) => {
+            const entryNodesMap = mpx.entryNodesMap
+            const entryModulesMap = mpx.entryModulesMap
+            if (!entryNodesMap[request]) {
+              entryNodesMap[request] = new EntryNode({
+                type,
+                request
+              })
             }
-            return hash(resourcePath)
-          },
-          addEntry (request, name, callback) {
-            const dep = EntryPlugin.createDependency(request, { name })
-            compilation.addEntry(compiler.context, dep, { name }, callback)
-            return dep
+            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
           },
-          getEntryNode: (module, type) => {
-            const entryNodeModulesMap = mpx.entryNodeModulesMap
-            let entryNode = entryNodeModulesMap.get(module)
-            if (!entryNode) {
-              entryNode = new EntryNode(module, type)
-              entryNodeModulesMap.set(module, entryNode)
+          pathHash: (resourcePath) => {
+            let hashPath = resourcePath
+            const pathHashMode = this.options.pathHashMode
+            const projectRoot = this.options.projectRoot || ''
+            if (pathHashMode === 'relative') {
+              hashPath = path.relative(projectRoot, resourcePath)
+            }
+            if (typeof pathHashMode === 'function') {
+              hashPath = pathHashMode(resourcePath, projectRoot) || resourcePath
             }
-            return entryNode
+            return hash(hashPath)
           },
           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).replace(/^\//, '')
+            if (typeof customOutputPath === 'function') return customOutputPath(type, name, hash, ext)
             if (type === 'component' || type === 'page') return path.join(type + 's', name + hash, 'index' + ext)
             return path.join(type, name + hash + ext)
           },
-          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
+          extract: (content, file, index, sideEffects) => {
+            index = index === -1 ? 0 : index
+            additionalAssets[file] = additionalAssets[file] || []
+            if (!additionalAssets[file][index]) {
+              additionalAssets[file][index] = content
             }
+            sideEffects && sideEffects.forEach((sideEffect) => {
+              sideEffect(additionalAssets)
+            })
           },
           // 组件和静态资源的输出规则如下：
           // 1. 主包引用的资源输出至主包
           // 2. 分包引用且主包引用过的资源输出至主包，不在当前分包重复输出
           // 3. 分包引用且无其他包引用的资源输出至当前分包
           // 4. 分包引用且其他分包也引用过的资源，重复输出至当前分包
-          getPackageInfo: ({ resource, resourceType, outputPath, issuerResource, warn, error }) => {
+          getPackageInfo: ({ resource, outputPath, resourceType = 'components', issuerResource, warn }) => {
             let packageRoot = ''
             let packageName = '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
+            const resourceMap = mpx[`${resourceType}Map`]
+            const { queryObj, resourcePath } = parseRequest(resource)
+            if (resourceType === 'staticResources' && outputPath) {
+              packageRoot = queryObj.packageRoot || ''
+              packageName = packageRoot || 'main'
             } 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)
@@ -698,36 +538,50 @@ class MpxWebpackPlugin {
                   isMain = true
                 }
               }
+              // todo forceMainPackageRules规则目前只能处理当前资源，不能处理资源子树，配置不当有可能会导致资源引用错误
               if (!isMain || isIndependent) {
                 packageRoot = currentPackageRoot
                 packageName = currentPackageName
-                if (this.options.auditResource && resourceType !== 'subpackageModule' && !isIndependent) {
-                  if (this.options.auditResource !== 'component' || resourceType === 'component') {
+                if (this.options.auditResource && resourceType !== 'subpackageModules' && !isIndependent) {
+                  if (this.options.auditResource !== 'component' || resourceType === 'components') {
                     Object.keys(resourceMap).filter(key => key !== 'main').forEach((key) => {
                       if (resourceMap[key][resourcePath] && key !== packageName) {
-                        warn && warn(new Error(`当前${resourceType === 'component' ? '组件' : '静态'}资源${resourcePath}在分包${key}和分包${packageName}中都有引用，会分别输出到两个分包中，为了总体积最优，可以在主包中建立引用声明以消除资源输出冗余！`))
+                        warn && warn(new Error(`当前${resourceType === 'components' ? '组件' : '静态'}资源${resourcePath}在分包${key}和分包${packageName}中都有引用，会分别输出到两个分包中，为了总体积最优，可以在主包中建立引用声明以消除资源输出冗余！`))
                       }
                     })
                   }
                 }
               }
-              resourceMap[packageName] = resourceMap[packageName] || {}
             }
 
-            if (outputPath) outputPath = toPosix(path.join(packageRoot, outputPath))
+            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
+            }
 
             return {
               packageName,
               packageRoot,
-              // 返回outputPath及alreadyOutputted
-              ...mpx.recordResourceMap({
-                resourcePath,
-                resourceType,
-                outputPath,
-                packageRoot,
-                warn,
-                error
-              })
+              outputPath,
+              alreadyOutputed
             }
           }
         }
@@ -735,110 +589,18 @@ 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 (originModule) {
-          proxyedCallback = (err, module) => {
-            // 避免selfModuleFactory的情况
-            if (module && module !== originModule) {
-              module.issuerResource = originModule.resource
-            }
-            return callback(err, module)
+        if (module.rawRequest === mpx.appScriptRawRequest) {
+          // 避免模块request重名，只对第一次匹配到的模块进行代理
+          mpx.appScriptRawRequest = ''
+          proxyedCallback = (err) => {
+            mpx.appScriptPromiseResolve()
+            return callback(err)
           }
         }
-        return rawFactorizeModule.call(compilation, options, proxyedCallback)
+        return rawProcessModuleDependencies.apply(compilation, [module, 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) {
@@ -850,15 +612,45 @@ class MpxWebpackPlugin {
             }
           })
           if (needInit) {
-            splitChunksPlugin.options = new SplitChunksPlugin(splitChunksOptions).options
+            splitChunksPlugin.options = SplitChunksPlugin.normalizeOptions(splitChunksOptions)
           }
         }
       })
 
-      JavascriptModulesPlugin.getCompilationHooks(compilation).renderModuleContent.tap('MpxWebpackPlugin', (source, module, renderContext) => {
+      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) => {
         // 处理dll产生的external模块
         if (module.external && module.userRequest.startsWith('dll-reference ') && mpx.mode !== 'web') {
-          const chunk = renderContext.chunk
+          const chunk = options.chunk
           const request = module.request
           let relativePath = toPosix(path.relative(path.dirname(chunk.name), request))
           if (!/^\.\.?\//.test(relativePath)) relativePath = './' + relativePath
@@ -869,141 +661,133 @@ class MpxWebpackPlugin {
         return source
       })
 
-      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
-      })
-
-      compilation.hooks.moduleAsset.tap('MpxWebpackPlugin', (module, filename) => {
-        const modules = mpx.assetsModulesMap.get(filename) || new Set()
-        modules.add(module)
-        mpx.assetsModulesMap.set(filename, modules)
-      })
-
-      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.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)
+            })
           }
-        } else {
-          assetsMap.set(index, content)
-        }
-      }
+          additionalAssets[file].forEach((item) => {
+            if (item) content.add(item)
+          })
+          const modules = (additionalAssets[file].modules || []).concat(additionalAssets[file].relativeModules || [])
 
-      const sortExtractedAssetsMap = (assetsMap) => {
-        return [...assetsMap.entries()].sort((a, b) => a[0] - b[0]).map(item => item[1])
-      }
+          if (modules.length > 1) {
+            // 同步relativeModules和modules之间的依赖
+            const fileDependencies = new Set()
+            const contextDependencies = new Set()
 
-      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)
-            }
+            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
+            })
           }
+          compilation.emitAsset(file, content, { modules: additionalAssets[file].modules })
         }
-
-        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)
-            }
+        // 所有编译的静态资源assetsInfo合入主编译
+        mpx.assetsInfo.forEach((assetInfo, name) => {
+          const oldAssetInfo = compilation.assetsInfo.get(name)
+          if (oldAssetInfo && oldAssetInfo.modules) {
+            assetInfo.modules = assetInfo.modules.concat(oldAssetInfo.modules)
+          }
+          compilation.assetsInfo.set(name, assetInfo)
+        })
+        // 链接主编译模块与子编译入口
+        Object.values(mpx.wxsMap).concat(Object.values(mpx.extractedMap)).forEach((item) => {
+          item.modules.forEach((module) => {
+            module.addDependency(item.dep)
           })
-          compilation.emitAsset(filename, source)
-        }
+        })
+
+        callback()
       })
 
       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 packageName = mpx.currentPackageRoot || 'main'
-            const issuerResource = moduleGraph.getIssuer(parser.state.module).resource
+            const { queryObj } = parseRequest(resource)
+            const packageName = queryObj.packageRoot || 'main'
+            const pagesMap = mpx.pagesMap
+            const componentsMap = mpx.componentsMap
+            const staticResourcesMap = mpx.staticResourcesMap
             const range = expr.range
-            const dep = new ResolveDependency(resource, packageName, issuerResource, range)
-            parser.state.current.addPresentationalDependency(dep)
+            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)
             return true
           }
         })
 
-        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
-        })
-
-        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
-            }
+        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
           }
-        }
 
-        parser.hooks.callMemberChain
-          .for('require')
-          .tap({
-            name: 'MpxWebpackPlugin',
-            stage: -1000
-          }, (expr, members) => requireAsyncHandler(expr, members))
+          const type = target.name
 
-        parser.hooks.callMemberChainOfCallMemberChain
-          .for('require')
-          .tap({
-            name: 'MpxWebpackPlugin',
-            stage: -1000
-          }, (expr, calleeMembers, callExpr) => requireAsyncHandler(callExpr, calleeMembers))
+          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)
+
+          let needInject = true
+          for (let v of module.variables) {
+            if (v.name === name) {
+              needInject = false
+              break
+            }
+          }
+          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)
+          }
+        }
         // 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.addPresentationalDependency(new InjectDependency({
+              current.addDependency(new InjectDependency({
                 content: 'document && ',
                 index: expr.test.range[0]
               }))
@@ -1019,7 +803,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.addPresentationalDependency(new InjectDependency({
+              current.addDependency(new InjectDependency({
                 content: '(function() { return this })() || ',
                 index: expr.range[0]
               }))
@@ -1027,169 +811,102 @@ class MpxWebpackPlugin {
           }
           if (/regenerator-runtime/.test(parser.state.module.resource)) {
             if (callee.name === 'Function' && arg0 && arg0.value === 'r' && arg1 && arg1.value === 'regeneratorRuntime = r') {
-              current.addPresentationalDependency(new ReplaceDependency('(function () {})', expr.range))
+              current.addDependency(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) {
-          // 处理跨平台全局对象转换
-          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)
+          // 全量替换未声明的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)
           // Proxy ctor for transMode
           if (!this.options.forceDisableProxyCtor) {
             parser.hooks.call.for('Page').tap('MpxWebpackPlugin', (expr) => {
-              transGlobalObject(expr.callee)
+              transHandler(expr.callee)
             })
             parser.hooks.call.for('Component').tap('MpxWebpackPlugin', (expr) => {
-              transGlobalObject(expr.callee)
+              transHandler(expr.callee)
             })
             parser.hooks.call.for('App').tap('MpxWebpackPlugin', (expr) => {
-              transGlobalObject(expr.callee)
+              transHandler(expr.callee)
             })
             if (mpx.mode === 'ali' || mpx.mode === 'web') {
               // 支付宝和web不支持Behaviors
               parser.hooks.call.for('Behavior').tap('MpxWebpackPlugin', (expr) => {
-                transGlobalObject(expr.callee)
+                transHandler(expr.callee)
               })
             }
           }
+        }
 
-          // 为跨平台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 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
           }
 
-          parser.hooks.callMemberChain.for(harmonySpecifierTag).tap('MpxWebpackPlugin', injectSrcModeForTransApi)
-          parser.hooks.callMemberChain.for('mpx').tap('MpxWebpackPlugin', injectSrcModeForTransApi)
-          parser.hooks.callMemberChain.for('wx').tap('MpxWebpackPlugin', injectSrcModeForTransApi)
+          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)
         }
-      })
 
-      // 为了正确生成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)
+        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)
         }
+      })
 
-        const {
-          globalObject,
-          chunkLoadingGlobal
-        } = compilation.outputOptions
+      // 为了正确生成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
 
         function getTargetFile (file) {
           let targetFile = file
@@ -1201,23 +918,21 @@ class MpxWebpackPlugin {
         }
 
         const processedChunk = new Set()
-        const appName = mpx.appInfo.name
+        const rootName = compilation._preparedEntrypoints[0].name
 
         function processChunk (chunk, isRuntime, relativeChunks) {
-          const chunkFile = chunk.files.values().next().value
-          if (!chunkFile || processedChunk.has(chunk)) {
+          if (!chunk.files[0] || processedChunk.has(chunk)) {
             return
           }
 
-          let originalSource = compilation.assets[chunkFile]
+          let originalSource = compilation.assets[chunk.files[0]]
           const source = new ConcatSource()
-          source.add(`\nvar ${globalObject} = ${globalObject} || {};\n\n`)
+          source.add('\nvar window = window || {};\n\n')
 
           relativeChunks.forEach((relativeChunk, index) => {
-            const relativeChunkFile = relativeChunk.files.values().next().value
-            if (!relativeChunkFile) return
-            let chunkPath = getTargetFile(chunkFile)
-            let relativePath = getTargetFile(relativeChunkFile)
+            if (!relativeChunk.files[0]) return
+            let chunkPath = getTargetFile(chunk.files[0])
+            let relativePath = getTargetFile(relativeChunk.files[0])
             relativePath = path.relative(path.dirname(chunkPath), relativePath)
             relativePath = fixRelative(relativePath, mpx.mode)
             relativePath = toPosix(relativePath)
@@ -1225,19 +940,19 @@ class MpxWebpackPlugin {
               // 引用runtime
               // 支付宝分包独立打包，通过全局context获取webpackJSONP
               if (mpx.mode === 'ali' && !mpx.isPluginMode) {
-                if (chunk.name === appName) {
-                  // 在rootChunk中挂载jsonpCallback
+                if (chunk.name === rootName) {
+                  // 在rootChunk中挂载jsonpFunction
                   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(chunkLoadingGlobal)}] = ${globalObject}[${JSON.stringify(chunkLoadingGlobal)}] = require("${relativePath}");\n`)
+                  source.add(`context[${JSON.stringify(jsonpFunction)}] = window[${JSON.stringify(jsonpFunction)}] = 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(`${globalObject}[${JSON.stringify(chunkLoadingGlobal)}] = context[${JSON.stringify(chunkLoadingGlobal)}];\n`)
+                  source.add(`window[${JSON.stringify(jsonpFunction)}] = context[${JSON.stringify(jsonpFunction)}];\n`)
                 }
               } else {
-                source.add(`${globalObject}[${JSON.stringify(chunkLoadingGlobal)}] = require("${relativePath}");\n`)
+                source.add(`window[${JSON.stringify(jsonpFunction)}] = require("${relativePath}");\n`)
               }
             } else {
               source.add(`require("${relativePath}");\n`)
@@ -1290,12 +1005,18 @@ try {
 } catch(e){
 }\n`)
             source.add(originalSource)
-            source.add(`\nmodule.exports = ${globalObject}[${JSON.stringify(chunkLoadingGlobal)}];\n`)
+            source.add(`\nmodule.exports = window[${JSON.stringify(jsonpFunction)}];\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[chunkFile] = source
+          compilation.assets[chunk.files[0]] = source
           processedChunk.add(chunk)
         }
 
@@ -1332,109 +1053,57 @@ try {
             }
           }
         })
+
+        callback()
       })
     })
 
     compiler.hooks.normalModuleFactory.tap('MpxWebpackPlugin', (normalModuleFactory) => {
       // resolve前修改原始request
-      normalModuleFactory.hooks.beforeResolve.tap('MpxWebpackPlugin', (data) => {
+      normalModuleFactory.hooks.beforeResolve.tapAsync('MpxWebpackPlugin', (data, callback) => {
         let request = data.request
         let { queryObj, resource } = parseRequest(request)
         if (queryObj.resolve) {
           // 此处的query用于将资源引用的当前包信息传递给resolveDependency
-          const resolveLoaderPath = normalize.lib('resolve-loader')
-          data.request = `!!${resolveLoaderPath}!${resource}`
-        }
-      })
-
-      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
-            })
+          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}`
           }
-          createData.resource = addQuery(createData.resource, { mpx: MPX_PROCESSED_FLAG }, true)
         }
+        callback(null, data)
+      })
 
-        if (mpx.mode === 'web') {
+      // resolve完成后修改loaders信息并批量添加mode query
+      normalModuleFactory.hooks.afterResolve.tapAsync('MpxWebpackPlugin', (data, callback) => {
+        if (data.loaders) {
+          const { queryObj } = parseRequest(data.request)
           const mpxStyleOptions = queryObj.mpxStyleOptions
-          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')
+          const firstLoader = (data.loaders[0] && data.loaders[0].loader) || ''
+          const isPitcherRequest = firstLoader.includes('vue-loader/lib/loaders/pitcher.js')
           let cssLoaderIndex = -1
           let vueStyleLoaderIndex = -1
           let mpxStyleLoaderIndex = -1
-          let tenonStyleLoaderIndex = -1
-          loaders.forEach((loader, index) => {
-            const currentLoader = toPosix(loader.loader)
+          data.loaders.forEach((loader, index) => {
+            const currentLoader = loader.loader
+            if (currentLoader.includes('ts-loader')) {
+              // todo 暂时固定写死options，待后续优化为复用rules后修正
+              loader.options = { appendTsSuffixTo: [/\.(mpx|vue)$/] }
+            }
             if (currentLoader.includes('css-loader')) {
               cssLoaderIndex = index
-            } else if (currentLoader.includes('vue-loader/lib/loaders/stylePostLoader')) {
+            } else if (currentLoader.includes('vue-loader/lib/loaders/stylePostLoader.js')) {
               vueStyleLoaderIndex = index
-            } else if (currentLoader.includes('@hummer/tenon-style-loader/dist/index.js')) {
-              tenonStyleLoaderIndex = index
-            } else if (currentLoader.includes(styleCompilerPath)) {
+            } else if (currentLoader.includes('@mpxjs/webpack-plugin/lib/style-compiler/index.js')) {
               mpxStyleLoaderIndex = index
             }
           })
-          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) {
+          if (mpxStyleLoaderIndex === -1) {
             let loaderIndex = -1
             if (cssLoaderIndex > -1 && vueStyleLoaderIndex === -1) {
               loaderIndex = cssLoaderIndex
@@ -1442,70 +1111,37 @@ try {
               loaderIndex = vueStyleLoaderIndex
             }
             if (loaderIndex > -1) {
-              loaders.splice(loaderIndex + 1, 0, {
-                loader: styleCompilerPath,
+              data.loaders.splice(loaderIndex + 1, 0, {
+                loader: normalize.lib('style-compiler/index.js'),
                 options: (mpxStyleOptions && JSON.parse(mpxStyleOptions)) || {}
               })
             }
           }
         }
-
-        createData.request = stringifyLoadersAndResource(loaders, createData.resource)
         // 根据用户传入的modeRules对特定资源添加mode query
-        this.runModeRules(createData)
+        this.runModeRules(data)
+        callback(null, data)
       })
     })
 
-    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)
+    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')
           }
-          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()
     })
   }
 }