@mpxjs/webpack-plugin 2.7.0-beta.1 → 2.7.0-beta.10

package/lib/index.js

@@ -24,10 +24,11 @@ const PackageEntryPlugin = require('./resolver/PackageEntryPlugin')
 // 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 DynamicEntryDependency = require('./dependencies/DynamicEntryDependency')
 const FlagPluginDependency = require('./dependencies/FlagPluginDependency')
+const RemoveEntryDependency = require('./dependencies/RemoveEntryDependency')
 const SplitChunksPlugin = require('webpack/lib/optimize/SplitChunksPlugin')
 const fixRelative = require('./utils/fix-relative')
 const parseRequest = require('./utils/parse-request')
@@ -48,6 +49,7 @@ 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 isEmptyObject = require('./utils/is-empty-object')
 
 const isProductionLikeMode = options => {
   return options.mode === 'production' || !options.mode
@@ -78,6 +80,11 @@ const isChunkInPackage = (chunkName, packageName) => {
 const getPackageCacheGroup = packageName => {
   if (packageName === 'main') {
     return {
+      // 对于独立分包模块不应用该cacheGroup
+      test: (module) => {
+        const { queryObj } = parseRequest(module.resource)
+        return !queryObj.isIndependent
+      },
       name: 'bundle',
       minChunks: 2,
       chunks: 'all'
@@ -106,20 +113,20 @@ const externalsMap = {
 const warnings = []
 const errors = []
 
-class EntryNode {
-  constructor (options) {
-    this.request = options.request
-    this.type = options.type
-    this.module = null
-    this.parents = new Set()
-    this.children = new Set()
-  }
-
-  addChild (node) {
-    this.children.add(node)
-    node.parents.add(this)
-  }
-}
+// class EntryNode {
+//   constructor (options) {
+//     this.request = options.request
+//     this.type = options.type
+//     this.module = null
+//     this.parents = new Set()
+//     this.children = new Set()
+//   }
+//
+//   addChild (node) {
+//     this.children.add(node)
+//     node.parents.add(this)
+//   }
+// }
 
 class MpxWebpackPlugin {
   constructor (options = {}) {
@@ -177,6 +184,7 @@ class MpxWebpackPlugin {
     options.fileConditionRules = options.fileConditionRules || {
       include: () => true
     }
+    options.customOutputPath = options.customOutputPath || null
     this.options = options
   }
 
@@ -184,35 +192,59 @@ class MpxWebpackPlugin {
     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
+    }
   }
 
   runModeRules (data) {
@@ -333,18 +365,17 @@ class MpxWebpackPlugin {
 
     let mpx
 
-    // 构建分包队列，在finishMake钩子当中最先执行，stage传递-1000
-    compiler.hooks.finishMake.tapAsync({
-      name: 'MpxWebpackPlugin',
-      stage: -1000
-    }, (compilation, callback) => {
+    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)
@@ -352,14 +383,26 @@ class MpxWebpackPlugin {
               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
@@ -387,8 +430,11 @@ 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())
@@ -436,7 +482,6 @@ class MpxWebpackPlugin {
           // todo es6 map读写性能高于object，之后会逐步替换
           vueContentCache: new Map(),
           currentPackageRoot: '',
-          wxsMap: {},
           wxsContentMap: {},
           assetsInfo: new Map(),
           forceUsePageCtor: this.options.forceUsePageCtor,
@@ -464,25 +509,6 @@ 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
-          },
           pathHash: (resourcePath) => {
             if (this.options.pathHashMode === 'relative' && this.options.projectRoot) {
               return hash(path.relative(this.options.projectRoot, resourcePath))
@@ -494,21 +520,27 @@ class MpxWebpackPlugin {
             compilation.addEntry(compiler.context, dep, { name }, callback)
             return dep
           },
+          getOutputPath: (resourcePath, type, { ext = '', conflictPath = '' } = {}) => {
+            const name = path.parse(resourcePath).name
+            const hash = mpx.pathHash(resourcePath)
+            const customOutputPath = this.options.customOutputPath
+            if (conflictPath) return conflictPath.replace(/(\.[^\\/]+)?$/, match => hash + match)
+            if (typeof customOutputPath === 'function') return customOutputPath(type, name, hash, ext)
+            if (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
@@ -582,16 +614,16 @@ class MpxWebpackPlugin {
               if (currentResourceMap[resourcePath] === outputPath) {
                 alreadyOutputed = true
               } else {
-                currentResourceMap[resourcePath] = 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
-                    }
+                // todo 用outputPathMap来检测冲突
+                // 输出冲突检测，如果存在输出路径冲突，对输出路径进行重命名
+                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
@@ -613,8 +645,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)
+          })
         })
       }
 
@@ -663,10 +696,12 @@ class MpxWebpackPlugin {
                 compilation.errors.push(e)
               }
             })
-            if (packageRoot) {
-              module.request = addQuery(module.request, { packageRoot })
-              module.resource = addQuery(module.resource, { packageRoot })
-            }
+            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)
           }
         }
 
@@ -687,17 +722,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) {
@@ -728,6 +752,14 @@ 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.beforeModuleAssets.tap('MpxWebpackPlugin', () => {
         const extractedAssetsMap = new Map()
         for (const module of compilation.modules) {
@@ -958,8 +990,6 @@ class MpxWebpackPlugin {
           chunkLoadingGlobal
         } = compilation.outputOptions
 
-        const { chunkGraph } = compilation
-
         function getTargetFile (file) {
           let targetFile = file
           const queryStringIdx = targetFile.indexOf('?')
@@ -1025,6 +1055,7 @@ try {
     context.setTimeout = setTimeout;
     context.JSON = JSON;
     context.Math = Math;
+    context.Date = Date;
     context.RegExp = RegExp;
     context.Infinity = Infinity;
     context.isFinite = isFinite;
@@ -1039,17 +1070,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)
           }
 
@@ -1126,7 +1168,7 @@ try {
                 if (loader.loader.includes(info[0])) {
                   loader.loader = info[1]
                 }
-                if (loader.loader === info[1]) {
+                if (loader.loader.includes(info[1])) {
                   insertBeforeIndex = index
                 }
               })
@@ -1161,41 +1203,43 @@ 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] && loaders[0].loader) || ''
+          const isPitcherRequest = firstLoader.includes('vue-loader/lib/loaders/pitcher')
+          let cssLoaderIndex = -1
+          let vueStyleLoaderIndex = -1
+          let mpxStyleLoaderIndex = -1
+          loaders.forEach((loader, index) => {
+            const currentLoader = loader.loader
+            if (currentLoader.includes('css-loader')) {
+              cssLoaderIndex = index
+            } else if (currentLoader.includes('vue-loader/lib/loaders/stylePostLoader')) {
+              vueStyleLoaderIndex = index
+            } else if (currentLoader.includes(styleCompilerPath)) {
+              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) {
+              loaders.splice(loaderIndex + 1, 0, {
+                loader: styleCompilerPath,
+                options: (mpxStyleOptions && JSON.parse(mpxStyleOptions)) || {}
+              })
+            }
+          }
+        }
+
+        createData.request = stringifyLoadersAndResource(loaders, createData.resource)
         // 根据用户传入的modeRules对特定资源添加mode query
         this.runModeRules(createData)
       })

package/lib/json-compiler/helper.js

@@ -4,30 +4,27 @@ const nativeLoaderPath = normalize.lib('native-loader')
 const isUrlRequestRaw = require('../utils/is-url-request')
 const parseRequest = require('../utils/parse-request')
 const loaderUtils = require('loader-utils')
+const resolve = require('../utils/resolve')
 
-module.exports = function createJSONHelper ({ loaderContext, emitWarning }) {
+module.exports = function createJSONHelper ({ loaderContext, emitWarning, customGetDynamicEntry }) {
   const mpx = loaderContext.getMpx()
   const resolveMode = mpx.resolveMode
   const externals = mpx.externals
   const root = mpx.projectRoot
   const publicPath = loaderContext._compilation.outputOptions.publicPath || ''
   const pathHash = mpx.pathHash
+  const getOutputPath = mpx.getOutputPath
+  const mode = mpx.mode
 
   const isUrlRequest = r => isUrlRequestRaw(r, root, externals)
   const urlToRequest = r => loaderUtils.urlToRequest(r)
 
-  // todo 提供不记录dependency的resolve方法，非必要的情况下不记录dependency，提升缓存利用率
-  const resolve = (context, request, callback) => {
-    const { queryObj } = parseRequest(request)
-    context = queryObj.context || context
-    return loaderContext.resolve(context, request, callback)
-  }
-
   const dynamicEntryMap = new Map()
 
   let dynamicEntryCount = 0
 
   const getDynamicEntry = (resource, type, outputPath = '', packageRoot = '', relativePath = '') => {
+    if (typeof customGetDynamicEntry === 'function') return customGetDynamicEntry(resource, type, outputPath, packageRoot, relativePath)
     const key = `mpx_dynamic_entry_${dynamicEntryCount++}`
     const value = `__mpx_dynamic_entry__( ${JSON.stringify(resource)},${JSON.stringify(type)},${JSON.stringify(outputPath)},${JSON.stringify(packageRoot)},${JSON.stringify(relativePath)})`
     dynamicEntryMap.set(key, value)
@@ -42,14 +39,16 @@ module.exports = function createJSONHelper ({ loaderContext, emitWarning }) {
   }
 
   const processComponent = (component, context, { tarRoot = '', outputPath = '', relativePath = '' }, callback) => {
-    if (!isUrlRequest(component)) return callback()
+    if (!isUrlRequest(component)) return callback(null, component)
     if (resolveMode === 'native') {
       component = urlToRequest(component)
     }
 
-    resolve(context, component, (err, resource, info) => {
+    resolve(context, component, loaderContext, (err, resource, info) => {
       if (err) return callback(err)
-      const resourcePath = parseRequest(resource).resourcePath
+      const { resourcePath, queryObj } = parseRequest(resource)
+      // 目前只有微信支持分包异步化
+      if (queryObj.root && mode === 'wx') tarRoot = queryObj.root
       const parsed = path.parse(resourcePath)
       const ext = parsed.ext
       const resourceName = path.join(parsed.dir, parsed.name)
@@ -70,8 +69,7 @@ module.exports = function createJSONHelper ({ loaderContext, emitWarning }) {
           let relative = path.relative(root, resourceName)
           outputPath = path.join('components', name + pathHash(root), relative)
         } else {
-          let componentName = parsed.name
-          outputPath = path.join('components', componentName + pathHash(resourcePath), componentName)
+          outputPath = getOutputPath(resourcePath, 'component')
         }
       }
       if (ext === '.js') {
@@ -83,24 +81,19 @@ module.exports = function createJSONHelper ({ loaderContext, emitWarning }) {
     })
   }
 
-  const getPageName = (resourcePath, ext) => {
-    const baseName = path.basename(resourcePath, ext)
-    return path.join('pages', baseName + pathHash(resourcePath), baseName)
-  }
-
   const processPage = (page, context, tarRoot = '', callback) => {
     let aliasPath = ''
     if (typeof page !== 'string') {
       aliasPath = page.path
       page = page.src
     }
-    if (!isUrlRequest(page)) return callback()
+    if (!isUrlRequest(page)) return callback(null, page)
     if (resolveMode === 'native') {
       page = urlToRequest(page)
     }
-    resolve(context, page, (err, resource) => {
+    resolve(context, page, loaderContext, (err, resource) => {
       if (err) return callback(err)
-      const { resourcePath } = parseRequest(resource)
+      const { resourcePath, queryObj: { isFirst } } = parseRequest(resource)
       const ext = path.extname(resourcePath)
       let outputPath
       if (aliasPath) {
@@ -109,7 +102,7 @@ module.exports = function createJSONHelper ({ loaderContext, emitWarning }) {
         const relative = path.relative(context, resourcePath)
         if (/^\./.test(relative)) {
           // 如果当前page不存在于context中，对其进行重命名
-          outputPath = getPageName(resourcePath, ext)
+          outputPath = getOutputPath(resourcePath, 'page')
           emitWarning(`Current page [${resourcePath}] is not in current pages directory [${context}], the page path will be replaced with [${outputPath}], use ?resolve to get the page path and navigate to it!`)
         } else {
           outputPath = /^(.*?)(\.[^.]*)?$/.exec(relative)[1]
@@ -119,7 +112,11 @@ module.exports = function createJSONHelper ({ loaderContext, emitWarning }) {
         resource = `!!${nativeLoaderPath}!${resource}`
       }
       const entry = getDynamicEntry(resource, 'page', outputPath, tarRoot, publicPath + tarRoot)
-      callback(null, entry)
+      const key = [resourcePath, outputPath, tarRoot].join('|')
+      callback(null, entry, {
+        isFirst,
+        key
+      })
     })
   }
 
@@ -127,7 +124,7 @@ module.exports = function createJSONHelper ({ loaderContext, emitWarning }) {
     if (resolveMode === 'native') {
       js = urlToRequest(js)
     }
-    resolve(context, js, (err, resource) => {
+    resolve(context, js, loaderContext, (err, resource) => {
       if (err) return callback(err)
       const { resourcePath } = parseRequest(resource)
       const relative = path.relative(context, resourcePath)
@@ -145,7 +142,6 @@ module.exports = function createJSONHelper ({ loaderContext, emitWarning }) {
     processDynamicEntry,
     processPage,
     processJsExport,
-    resolve,
     isUrlRequest,
     urlToRequest
   }