@mpxjs/webpack-plugin 2.7.0-alpha.0 → 2.7.0-alpha.2

package/lib/index.js

@@ -7,9 +7,13 @@ 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')
@@ -19,19 +23,23 @@ 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 RecordStaticResourceDependency = require('./dependencies/RecordStaticResourceDependency')
+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')
@@ -47,13 +55,15 @@ 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 } = require('./utils/const')
+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) {
@@ -74,30 +84,6 @@ const isChunkInPackage = (chunkName, packageName) => {
   return (new RegExp(`^${packageName}\\/`)).test(chunkName)
 }
 
-const getPackageCacheGroup = packageName => {
-  if (packageName === 'main') {
-    return {
-      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 externalsMap = {
   weui: /^weui-miniprogram/
 }
@@ -106,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()
   }
@@ -160,9 +145,6 @@ class MpxWebpackPlugin {
     options.transRpxRules = options.transRpxRules || null
     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
@@ -176,42 +158,104 @@ class MpxWebpackPlugin {
     options.fileConditionRules = options.fileConditionRules || {
       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) {
       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 }
+    return {
+      loader: normalize.lib('native-loader'),
+      options
+    }
   }
 
   static wxssLoader (options) {
-    return { loader: normalize.lib('wxss/loader'), options }
+    return {
+      loader: normalize.lib('wxss/loader'),
+      options
+    }
   }
 
   static wxmlLoader (options) {
-    return { loader: normalize.lib('wxml/loader'), options }
+    return {
+      loader: normalize.lib('wxml/loader'),
+      options
+    }
   }
 
   static pluginLoader (options = {}) {
-    return { loader: normalize.lib('json-compiler/plugin'), options }
+    return {
+      loader: normalize.lib('json-compiler/plugin'),
+      options
+    }
   }
 
   static wxsPreLoader (options = {}) {
-    return { loader: normalize.lib('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) {
@@ -237,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) {
@@ -256,7 +303,7 @@ class MpxWebpackPlugin {
 
     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 {
@@ -266,11 +313,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') {
+    if (this.options.mode !== 'web' && this.options.mode !== 'tenon') {
       const optimization = compiler.options.optimization
       optimization.runtimeChunk = {
         name: (entrypoint) => {
@@ -311,6 +359,7 @@ class MpxWebpackPlugin {
         originalWriteFile(filePath, content, callback)
       }
     }
+
     const defs = this.options.defs
 
     const typeExtMap = config[this.options.mode].typeExtMap
@@ -332,33 +381,84 @@ class MpxWebpackPlugin {
 
     let mpx
 
-    // 构建分包队列，在finishMake钩子当中最先执行，stage传递-1000
-    compiler.hooks.finishMake.tapAsync({
-      name: 'MpxWebpackPlugin',
-      stage: -1000
-    }, (compilation, callback) => {
+    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 && mpx.subpackagesEntriesMap) {
-        async.eachOfSeries(mpx.subpackagesEntriesMap, (deps, packageRoot, callback) => {
+      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.staticResourcesMap[packageRoot] = {}
-          mpx.subpackageModulesMap[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)
-              mpx.replacePathMap[dep.key] = resultPath
+              dep.resultPath = mpx.replacePathMap[dep.key] = resultPath
               callback()
             })
           }, 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, module) => {
+      NormalModule.getCompilationHooks(compilation).loader.tap('MpxWebpackPlugin', (loaderContext) => {
         // 设置loaderContext的minimize
         if (isProductionLikeMode(compiler.options)) {
           loaderContext.minimize = true
@@ -386,14 +486,23 @@ class MpxWebpackPlugin {
       compilation.dependencyFactories.set(FlagPluginDependency, new NullFactory())
       compilation.dependencyTemplates.set(FlagPluginDependency, new FlagPluginDependency.Template())
 
-      compilation.dependencyFactories.set(RecordStaticResourceDependency, new NullFactory())
-      compilation.dependencyTemplates.set(RecordStaticResourceDependency, new RecordStaticResourceDependency.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(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 }) => {
@@ -426,18 +535,18 @@ class MpxWebpackPlugin {
           subpackagesEntriesMap: {},
           replacePathMap: {},
           exportModules: new Set(),
-          // 记录entry依赖关系，用于体积分析
-          entryNodesMap: {},
           // 记录entryModule与entryNode的对应关系，用于体积分析
-          entryModulesMap: new Map(),
-          extractedMap: {},
+          entryNodeModulesMap: new Map(),
+          // 记录与asset相关联的modules，用于体积分析
+          assetsModulesMap: new Map(),
+          // 记录与asset相关联的ast，用于体积分析和esCheck，避免重复parse
+          assetsASTsMap: new Map(),
           usingComponents: {},
           // todo es6 map读写性能高于object，之后会逐步替换
           vueContentCache: new Map(),
+          wxsAssetsCache: new Map(),
           currentPackageRoot: '',
-          wxsMap: {},
           wxsContentMap: {},
-          assetsInfo: new Map(),
           forceUsePageCtor: this.options.forceUsePageCtor,
           resolveMode: this.options.resolveMode,
           mode: this.options.mode,
@@ -450,8 +559,10 @@ class MpxWebpackPlugin {
           transRpxRules: this.options.transRpxRules,
           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,
@@ -463,25 +574,7 @@ 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) => {
             if (this.options.pathHashMode === 'relative' && this.options.projectRoot) {
               return hash(path.relative(this.options.projectRoot, resourcePath))
@@ -493,21 +586,36 @@ class MpxWebpackPlugin {
             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 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).replace(/^\//, '')
+            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 = queryObj.type
-            const isStatic = queryObj.isStatic
-            const isPlugin = queryObj.isPlugin
+            const { type, isStatic, isPlugin } = queryObj
             let file
             if (isPlugin) {
               file = 'plugin.json'
             } else if (isStatic) {
               const packageRoot = queryObj.packageRoot || ''
-              const resourceName = path.parse(resourcePath).name
-              file = toPosix(path.join(packageRoot, type, resourceName + mpx.pathHash(resourcePath) + typeExtMap[type]))
+              file = toPosix(path.join(packageRoot, mpx.getOutputPath(resourcePath, type, { ext: typeExtMap[type] })))
             } else {
               const appInfo = mpx.appInfo
               const pagesMap = mpx.pagesMap
@@ -523,24 +631,57 @@ class MpxWebpackPlugin {
             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
+            }
+          },
           // 组件和静态资源的输出规则如下：
           // 1. 主包引用的资源输出至主包
           // 2. 分包引用且主包引用过的资源输出至主包，不在当前分包重复输出
           // 3. 分包引用且无其他包引用的资源输出至当前分包
           // 4. 分包引用且其他分包也引用过的资源，重复输出至当前分包
-          getPackageInfo: ({ resource, outputPath, resourceType, issuerResource, warn, error }) => {
+          getPackageInfo: ({ resource, resourceType, outputPath, issuerResource, warn, error }) => {
             let packageRoot = ''
             let packageName = 'main'
-            let currentResourceMap = {}
 
             const { resourcePath } = parseRequest(resource)
             const currentPackageRoot = mpx.currentPackageRoot
             const currentPackageName = currentPackageRoot || 'main'
-            const isIndependent = mpx.independentSubpackagesMap[currentPackageRoot]
+            const isIndependent = !!mpx.independentSubpackagesMap[currentPackageRoot]
             const resourceMap = mpx[`${resourceType}sMap`] || mpx.otherResourcesMap
 
             if (!resourceMap.main) {
-              currentResourceMap = resourceMap
               packageRoot = currentPackageRoot
               packageName = currentPackageName
             } else {
@@ -571,33 +712,22 @@ class MpxWebpackPlugin {
                 }
               }
               resourceMap[packageName] = resourceMap[packageName] || {}
-              currentResourceMap = resourceMap[packageName]
             }
 
-            let alreadyOutputed = currentResourceMap[resourcePath]
-            if (!alreadyOutputed) {
-              if (outputPath) {
-                outputPath = toPosix(path.join(packageRoot, outputPath))
-                // 输出冲突检测只有page需要
-                if (resourceType === 'page') {
-                  for (let key in currentResourceMap) {
-                    if (currentResourceMap[key] === outputPath && key !== resourcePath) {
-                      error && error(new Error(`Current ${resourceType} [${resourcePath}] registers a same output path [${outputPath}] with existed ${resourceType} [${key}], which is not allowed!`))
-                      break
-                    }
-                  }
-                }
-                currentResourceMap[resourcePath] = outputPath
-              } else {
-                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
+              })
             }
           }
         }
@@ -609,8 +739,9 @@ class MpxWebpackPlugin {
         async.forEach(presentationalDependencies.filter((dep) => dep.mpxAction), (dep, callback) => {
           dep.mpxAction(module, compilation, callback)
         }, (err) => {
-          if (err) return callback(err)
-          rawProcessModuleDependencies.call(compilation, module, callback)
+          rawProcessModuleDependencies.call(compilation, module, (innerErr) => {
+            return callback(err || innerErr)
+          })
         })
       }
 
@@ -635,12 +766,14 @@ class MpxWebpackPlugin {
       const rawAddModule = compilation.addModule
       compilation.addModule = (module, callback) => {
         const issuerResource = module.issuerResource
-        // 避免context module报错
-        if (module.request && module.resource) {
+        const currentPackageRoot = mpx.currentPackageRoot
+        const independent = mpx.independentSubpackagesMap[currentPackageRoot]
+
+        if (module.resource) {
+          // NormalModule
           const isStatic = isStaticModule(module)
-          const isIndependent = mpx.independentSubpackagesMap[mpx.currentPackageRoot]
 
-          let needPackageQuery = isStatic || isIndependent
+          let needPackageQuery = isStatic || independent
 
           if (!needPackageQuery) {
             const { resourcePath } = parseRequest(module.resource)
@@ -660,12 +793,35 @@ class MpxWebpackPlugin {
               }
             })
             if (packageRoot) {
-              module.request = addQuery(module.request, { packageRoot })
-              module.resource = addQuery(module.resource, { 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)
       }
 
@@ -683,17 +839,6 @@ class MpxWebpackPlugin {
         }
       })
 
-      // todo 统一通过dep+mpx actions处理
-      compilation.hooks.stillValidModule.tap('MpxWebpackPlugin', (module) => {
-        const buildInfo = module.buildInfo
-        if (buildInfo.pagesMap) {
-          Object.assign(mpx.pagesMap, buildInfo.pagesMap)
-        }
-        if (buildInfo.componentsMap && buildInfo.packageName) {
-          Object.assign(mpx.componentsMap[buildInfo.packageName], buildInfo.componentsMap)
-        }
-      })
-
       compilation.hooks.finishModules.tap('MpxWebpackPlugin', (modules) => {
         // 自动跟进分包配置修改splitChunksPlugin配置
         if (splitChunksPlugin) {
@@ -724,6 +869,37 @@ 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!`))
+          }
+        } else {
+          assetsMap.set(index, content)
+        }
+      }
+
+      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) {
@@ -732,20 +908,19 @@ class MpxWebpackPlugin {
             if (extractedInfo) {
               let extractedAssets = extractedAssetsMap.get(filename)
               if (!extractedAssets) {
-                extractedAssets = []
+                extractedAssets = [new Map(), new Map()]
                 extractedAssetsMap.set(filename, extractedAssets)
               }
-              extractedAssets.push(extractedInfo)
-              // todo 后续计算体积时可以通过这个钩子关联静态assets和module
-              // compilation.hooks.moduleAsset.call(module, filename)
+              fillExtractedAssetsMap(extractedInfo.pre ? extractedAssets[0] : extractedAssets[1], extractedInfo, filename)
+              compilation.hooks.moduleAsset.call(module, filename)
             }
           }
         }
 
-        for (const [filename, extractedAssets] of extractedAssetsMap) {
-          const sortedExtractedAssets = extractedAssets.sort((a, b) => a.index - b.index)
+        for (const [filename, [pre, normal]] of extractedAssetsMap) {
+          const sortedExtractedAssets = [...sortExtractedAssetsMap(pre), ...sortExtractedAssetsMap(normal)]
           const source = new ConcatSource()
-          sortedExtractedAssets.forEach(({ content }) => {
+          sortedExtractedAssets.forEach((content) => {
             if (content) {
               // 处理replace path
               if (/"mpx_replace_path_.*?"/.test(content)) {
@@ -781,46 +956,48 @@ class MpxWebpackPlugin {
           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 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 type = target.name
-
-          const name = type === 'wx' ? 'mpx' : 'createFactory'
-          const replaceContent = type === 'wx' ? 'mpx' : `createFactory(${JSON.stringify(type)})`
+        parser.hooks.callMemberChain
+          .for('require')
+          .tap({
+            name: 'MpxWebpackPlugin',
+            stage: -1000
+          }, (expr, members) => requireAsyncHandler(expr, members))
 
-          const dep = new ReplaceDependency(replaceContent, target.range)
-          current.addPresentationalDependency(dep)
+        parser.hooks.callMemberChainOfCallMemberChain
+          .for('require')
+          .tap({
+            name: 'MpxWebpackPlugin',
+            stage: -1000
+          }, (expr, calleeMembers, callExpr) => requireAsyncHandler(callExpr, calleeMembers))
 
-          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)
-          }
-        }
         // hack babel polyfill global
         parser.hooks.statementIf.tap('MpxWebpackPlugin', (expr) => {
           if (/core-js.+microtask/.test(parser.state.module.resource)) {
@@ -855,90 +1032,139 @@ class MpxWebpackPlugin {
           }
         })
 
+        // 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.expressionMemberChain.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.addPresentationalDependency(dep)
-        }
-
-        if (mpx.srcMode !== mpx.mode) {
-          parser.hooks.callMemberChain.for('imported var').tap('MpxWebpackPlugin', handler)
-          parser.hooks.callMemberChain.for('mpx').tap('MpxWebpackPlugin', handler)
-          parser.hooks.callMemberChain.for('wx').tap('MpxWebpackPlugin', handler)
+          parser.hooks.callMemberChain.for(harmonySpecifierTag).tap('MpxWebpackPlugin', injectSrcModeForTransApi)
+          parser.hooks.callMemberChain.for('mpx').tap('MpxWebpackPlugin', injectSrcModeForTransApi)
+          parser.hooks.callMemberChain.for('wx').tap('MpxWebpackPlugin', injectSrcModeForTransApi)
         }
       })
 
@@ -947,15 +1173,24 @@ class MpxWebpackPlugin {
         name: 'MpxWebpackPlugin',
         stage: compilation.PROCESS_ASSETS_STAGE_ADDITIONS
       }, () => {
-        if (mpx.mode === 'web') return
+        if (mpx.mode === 'web' || mpx.mode === 'tenon') 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)
+        }
 
         const {
           globalObject,
           chunkLoadingGlobal
         } = compilation.outputOptions
 
-        const { chunkGraph } = compilation
-
         function getTargetFile (file) {
           let targetFile = file
           const queryStringIdx = targetFile.indexOf('?')
@@ -966,7 +1201,6 @@ class MpxWebpackPlugin {
         }
 
         const processedChunk = new Set()
-        // const rootName = compilation.entries.keys().next().value
         const appName = mpx.appInfo.name
 
         function processChunk (chunk, isRuntime, relativeChunks) {
@@ -1021,6 +1255,7 @@ try {
     context.setTimeout = setTimeout;
     context.JSON = JSON;
     context.Math = Math;
+    context.Date = Date;
     context.RegExp = RegExp;
     context.Infinity = Infinity;
     context.isFinite = isFinite;
@@ -1035,17 +1270,28 @@ try {
     context.ArrayBuffer = ArrayBuffer;
     context.Symbol = Symbol;
     context.Reflect = Reflect;
+    context.Object = Object;
+    context.Error = Error;
+    context.Array = Array;
+    context.Float32Array = Float32Array;
+    context.Float64Array = Float64Array;
+    context.Int16Array = Int16Array;
+    context.Int32Array = Int32Array;
+    context.Int8Array = Int8Array;
+    context.Uint16Array = Uint16Array;
+    context.Uint32Array = Uint32Array;
+    context.Uint8ClampedArray = Uint8ClampedArray;
+    context.String = String;
+    context.Function = Function;
+    context.SyntaxError = SyntaxError;
+    context.decodeURIComponent = decodeURIComponent;
+    context.encodeURIComponent = encodeURIComponent;
   }
 } catch(e){
 }\n`)
             source.add(originalSource)
             source.add(`\nmodule.exports = ${globalObject}[${JSON.stringify(chunkLoadingGlobal)}];\n`)
           } else {
-            const entryModules = chunkGraph.getChunkEntryModulesIterable(chunk)
-            const entryModule = entryModules && entryModules[0]
-            if (entryModule && mpx.exportModules.has(entryModule)) {
-              source.add('module.exports =\n')
-            }
             source.add(originalSource)
           }
 
@@ -1119,10 +1365,11 @@ try {
               let insertBeforeIndex = -1
               const info = typeLoaderProcessInfo[type]
               loaders.forEach((loader, index) => {
-                if (loader.loader.includes(info[0])) {
+                const currentLoader = toPosix(loader.loader)
+                if (currentLoader.includes(info[0])) {
                   loader.loader = info[1]
-                }
-                if (loader.loader === info[1]) {
+                  insertBeforeIndex = index
+                } else if (currentLoader.includes(info[1])) {
                   insertBeforeIndex = index
                 }
               })
@@ -1157,64 +1404,108 @@ try {
               loader: extractorPath
             })
           }
-
           createData.resource = addQuery(createData.resource, { mpx: MPX_PROCESSED_FLAG }, true)
-          createData.request = stringifyLoadersAndResource(loaders, createData.resource)
         }
 
-        // const mpxStyleOptions = queryObj.mpxStyleOptions
-        // 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
-        // data.loaders.forEach((loader, index) => {
-        //   const currentLoader = loader.loader
-        //   if (currentLoader.includes('css-loader')) {
-        //     cssLoaderIndex = index
-        //   } else if (currentLoader.includes('vue-loader/lib/loaders/stylePostLoader.js')) {
-        //     vueStyleLoaderIndex = index
-        //   } else if (currentLoader.includes('@mpxjs/webpack-plugin/lib/style-compiler/index.js')) {
-        //     mpxStyleLoaderIndex = index
-        //   }
-        // })
-        // if (mpxStyleLoaderIndex === -1) {
-        //   let loaderIndex = -1
-        //   if (cssLoaderIndex > -1 && vueStyleLoaderIndex === -1) {
-        //     loaderIndex = cssLoaderIndex
-        //   } else if (cssLoaderIndex > -1 && vueStyleLoaderIndex > -1 && !isPitcherRequest) {
-        //     loaderIndex = vueStyleLoaderIndex
-        //   }
-        //   if (loaderIndex > -1) {
-        //     data.loaders.splice(loaderIndex + 1, 0, {
-        //       loader: normalize.lib('style-compiler/index.js'),
-        //       options: (mpxStyleOptions && JSON.parse(mpxStyleOptions)) || {}
-        //     })
-        //   }
-        // }
+        if (mpx.mode === 'web') {
+          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')
+          let cssLoaderIndex = -1
+          let vueStyleLoaderIndex = -1
+          let mpxStyleLoaderIndex = -1
+          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')) {
+              vueStyleLoaderIndex = index
+            } else if (currentLoader.includes('@hummer/tenon-style-loader/dist/index.js')) {
+              tenonStyleLoaderIndex = index
+            } else if (currentLoader.includes(styleCompilerPath)) {
+              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) {
+            let loaderIndex = -1
+            if (cssLoaderIndex > -1 && vueStyleLoaderIndex === -1) {
+              loaderIndex = cssLoaderIndex
+            } else if (cssLoaderIndex > -1 && vueStyleLoaderIndex > -1 && !isPitcherRequest) {
+              loaderIndex = vueStyleLoaderIndex
+            }
+            if (loaderIndex > -1) {
+              loaders.splice(loaderIndex + 1, 0, {
+                loader: styleCompilerPath,
+                options: (mpxStyleOptions && JSON.parse(mpxStyleOptions)) || {}
+              })
+            }
+          }
+        }
+
+        createData.request = stringifyLoadersAndResource(loaders, createData.resource)
         // 根据用户传入的modeRules对特定资源添加mode query
         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()
     })
   }
 }