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

package/README.md

@@ -13,6 +13,6 @@ module.exports = {
     new mpxWebpackPlugin({
       mode: 'wx'
     })
-  ],
+  ]
 }
 ```

package/lib/config.js

@@ -356,6 +356,20 @@ module.exports = {
       templatePrefix: 'module.exports = \n'
     }
   },
+  tenon: {
+    directive: {
+      if: 'v-if',
+      elseif: 'v-else-if',
+      else: 'v-else'
+    },
+    wxs: {
+      tag: 'wxs',
+      module: 'module',
+      src: 'src',
+      ext: '.wxs',
+      templatePrefix: 'module.exports = \n'
+    }
+  },
   qa: {
     typeExtMap: {
       json: '.json',

package/lib/dependencies/AddEntryDependency.js

@@ -0,0 +1,24 @@
+const NullDependency = require('webpack/lib/dependencies/NullDependency')
+
+class AddEntryDependency extends NullDependency {
+  constructor ({ context, dep, name }) {
+    super()
+    this.__addEntryParams = [ context, dep, name ]
+  }
+
+  get type () {
+    return 'mpx add entry'
+  }
+
+  // updateHash (hash) {
+  //   super.updateHash(hash)
+  //   hash.update(this.childCompileEntryModule.identifier())
+  // }
+}
+
+AddEntryDependency.Template = class AddEntryDependencyTemplate {
+  apply () {
+  }
+}
+
+module.exports = AddEntryDependency

package/lib/dependencies/AppEntryDependency.js

@@ -16,6 +16,8 @@ class AppEntryDependency extends NullDependency {
     const mpx = compilation.__mpx__
     const moduleGraph = compilation.moduleGraph
 
+    mpx.getEntryNode(module, 'app')
+
     if (mpx.appInfo.name) {
       const issuer = moduleGraph.getIssuer(module)
       const err = new Error(issuer

package/lib/dependencies/CommonJsAsyncDependency.js

@@ -0,0 +1,51 @@
+const ModuleDependency = require('webpack/lib/dependencies/ModuleDependency')
+const makeSerializable = require('webpack/lib/util/makeSerializable')
+
+class CommonJsAsyncDependency extends ModuleDependency {
+  constructor (request, range) {
+    super(request)
+    this.range = range
+  }
+
+  get type () {
+    return 'mpx cjs async'
+  }
+
+  get category () {
+    return 'commonjs'
+  }
+}
+
+CommonJsAsyncDependency.Template = class CommonJsAsyncDependencyTemplate extends (
+  ModuleDependency.Template
+) {
+  apply (
+    dep,
+    source,
+    {
+      runtimeTemplate,
+      moduleGraph,
+      chunkGraph,
+      runtimeRequirements
+    }
+  ) {
+    const requireExpr = runtimeTemplate.moduleExports({
+      module: moduleGraph.getModule(dep),
+      chunkGraph,
+      request: dep.request,
+      weak: dep.weak,
+      runtimeRequirements
+    })
+
+    const content = `Promise.resolve(${requireExpr})`
+
+    source.replace(dep.range[0], dep.range[1] - 1, content)
+  }
+}
+
+makeSerializable(
+  CommonJsAsyncDependency,
+  '@mpxjs/webpack-plugin/lib/dependencies/CommonJsAsyncDependency'
+)
+
+module.exports = CommonJsAsyncDependency

package/lib/dependencies/CommonJsVariableDependency.js

@@ -1,8 +1,9 @@
 const ModuleDependency = require('webpack/lib/dependencies/ModuleDependency')
 const makeSerializable = require('webpack/lib/util/makeSerializable')
+const InitFragment = require('webpack/lib//InitFragment')
 
 class CommonJsVariableDependency extends ModuleDependency {
-  constructor (request, name) {
+  constructor (request, name = '') {
     super(request)
     this.name = name
   }
@@ -41,16 +42,13 @@ CommonJsVariableDependency.Template = class CommonJsVariableDependencyTemplate e
     dep,
     source,
     {
-      module,
       runtimeTemplate,
       moduleGraph,
       chunkGraph,
       runtimeRequirements,
-      runtime,
       initFragments
     }
   ) {
-    if (!dep.name) return
     const importedModule = moduleGraph.getModule(dep)
     let requireExpr = runtimeTemplate.moduleExports({
       module: importedModule,
@@ -60,9 +58,18 @@ CommonJsVariableDependency.Template = class CommonJsVariableDependencyTemplate e
       runtimeRequirements
     })
 
-    requireExpr = `/* mpx cjs variable */ var ${dep.name} = ` + requireExpr
+    let expr = '/* mpx cjs variable */ '
+    if (dep.name) expr += 'var ' + dep.name + ' = '
+    expr += requireExpr + ';\n'
 
-    source.insert(0, requireExpr)
+    initFragments.push(
+      new InitFragment(
+        expr,
+        InitFragment.STAGE_CONSTANTS,
+        1,
+        dep.request
+      )
+    )
   }
 }
 

package/lib/dependencies/DynamicEntryDependency.js

@@ -3,15 +3,19 @@ const makeSerializable = require('webpack/lib/util/makeSerializable')
 const path = require('path')
 const addQuery = require('../utils/add-query')
 const toPosix = require('../utils/to-posix')
+const async = require('async')
+const parseRequest = require('../utils/parse-request')
+const { MPX_CURRENT_CHUNK } = require('../utils/const')
 
 class DynamicEntryDependency extends NullDependency {
-  constructor (resource, entryType, outputPath = '', packageRoot = '', relativePath = '', range) {
+  constructor (request, entryType, outputPath = '', packageRoot = '', relativePath = '', context = '', range) {
     super()
-    this.resource = resource
+    this.request = request
     this.entryType = entryType
     this.outputPath = outputPath
     this.packageRoot = packageRoot
     this.relativePath = relativePath
+    this.context = context
     this.range = range
   }
 
@@ -20,52 +24,78 @@ class DynamicEntryDependency extends NullDependency {
   }
 
   get key () {
-    return `${this.resource}_${this.entryType}_${this.outputPath}_${this.packageRoot}_${this.relativePath}_${this.range[0]}_${this.range[1]}`
+    const { request, entryType, outputPath, packageRoot, relativePath, context, range } = this
+    return toPosix([request, entryType, outputPath, packageRoot, relativePath, context, ...range].join('|'))
   }
 
   addEntry (compilation, callback) {
     const mpx = compilation.__mpx__
-    const publicPath = compilation.outputOptions.publicPath || ''
-    let { resource, entryType, outputPath, relativePath } = this
-
-    const { packageRoot, outputPath: filename, alreadyOutputed } = mpx.getPackageInfo({
-      resource,
-      outputPath,
-      resourceType: entryType,
-      warn (e) {
-        compilation.warnings.push(e)
+    let { request, entryType, outputPath, relativePath, context, originEntryNode, publicPath, resolver } = this
+
+    async.waterfall([
+      (callback) => {
+        if (context && resolver) {
+          resolver.resolve({}, context, request, {}, (err, resource) => {
+            callback(err, resource)
+          })
+        } else {
+          callback(null, request)
+        }
       },
-      error (e) {
-        compilation.errors.push(e)
-      }
-    })
+      (resource, callback) => {
+        if (!outputPath) {
+          const { resourcePath } = parseRequest(resource)
+          outputPath = mpx.getOutputPath(resourcePath, entryType)
+        }
 
-    let resultPath = publicPath + filename
-    if (relativePath) {
-      resultPath = toPosix(path.relative(relativePath, resultPath))
-    }
+        const { packageRoot, outputPath: filename, alreadyOutputted } = mpx.getPackageInfo({
+          resource,
+          outputPath,
+          resourceType: entryType,
+          warn (e) {
+            compilation.warnings.push(e)
+          },
+          error (e) {
+            compilation.errors.push(e)
+          }
+        })
 
-    if (alreadyOutputed) return callback(null, { resultPath })
+        let resultPath = publicPath + filename
+        if (relativePath && relativePath !== MPX_CURRENT_CHUNK) {
+          resultPath = toPosix(path.relative(relativePath, resultPath))
+        }
 
-    if (packageRoot) {
-      resource = addQuery(resource, { packageRoot })
-    }
-    mpx.addEntry(resource, filename, (err, entryModule) => {
-      if (err) return callback(err)
-      if (entryType === 'export') {
-        mpx.exportModules.add(entryModule)
+        // export类型的resultPath需要添加.js后缀
+        if (entryType === 'export') resultPath += '.js'
+
+        if (alreadyOutputted) return callback(null, { resultPath })
+
+        // 对于常规js模块不应添加packageRoot避免冗余
+        if (packageRoot && entryType !== 'export') {
+          resource = addQuery(resource, { packageRoot }, true)
+        }
+
+        mpx.addEntry(resource, filename, (err, entryModule) => {
+          if (err) return callback(err)
+          if (entryType === 'export') {
+            mpx.exportModules.add(entryModule)
+          }
+          originEntryNode.addChild(mpx.getEntryNode(entryModule, entryType))
+          return callback(null, {
+            resultPath,
+            entryModule
+          })
+        })
       }
-      // todo entry的父子关系可以在这里建立
-      return callback(null, {
-        resultPath,
-        entryModule
-      })
-    })
+    ], callback)
   }
 
   mpxAction (module, compilation, callback) {
     const mpx = compilation.__mpx__
-    const { packageRoot } = this
+    const { packageRoot, context } = this
+    this.originEntryNode = mpx.getEntryNode(module)
+    this.publicPath = compilation.outputOptions.publicPath || ''
+    if (context) this.resolver = compilation.resolverFactory.get('normal', module.resolveOptions)
     // 分包构建在需要在主包构建完成后在finishMake中处理，返回的资源路径先用key来占位，在合成extractedAssets时再进行最终替换
     if (packageRoot && mpx.currentPackageRoot !== packageRoot) {
       mpx.subpackagesEntriesMap[packageRoot] = mpx.subpackagesEntriesMap[packageRoot] || []
@@ -82,38 +112,52 @@ class DynamicEntryDependency extends NullDependency {
 
   // hash会影响最终的codeGenerateResult是否走缓存，由于该dep中resultPath是动态变更的，需要将其更新到hash中，避免错误使用缓存
   updateHash (hash, context) {
-    const { resultPath } = this
+    const { resultPath, relativePath } = this
     if (resultPath) hash.update(resultPath)
+    // relativePath为MPX_CURRENT_CHUNK时，插入随机hash使当前module的codeGeneration cache失效，从而执行dep.apply动态获取当前module所属的chunk路径
+    if (relativePath === MPX_CURRENT_CHUNK) hash.update('' + (+new Date()) + Math.random())
     super.updateHash(hash, context)
   }
 
   serialize (context) {
     const { write } = context
-    write(this.resource)
+    write(this.request)
     write(this.entryType)
     write(this.outputPath)
     write(this.packageRoot)
     write(this.relativePath)
+    write(this.context)
     write(this.range)
     super.serialize(context)
   }
 
   deserialize (context) {
     const { read } = context
-    this.resource = read()
+    this.request = read()
     this.entryType = read()
     this.outputPath = read()
     this.packageRoot = read()
     this.relativePath = read()
+    this.context = read()
     this.range = read()
     super.deserialize(context)
   }
 }
 
 DynamicEntryDependency.Template = class DynamicEntryDependencyTemplate {
-  apply (dep, source) {
-    const { resultPath, range, key } = dep
-    if (resultPath) {
+  apply (dep, source, {
+    module,
+    chunkGraph
+  }) {
+    let { resultPath, range, key, outputPath, relativePath, publicPath } = dep
+    if (outputPath === 'custom-tab-bar/index') {
+      // replace with true for custom-tab-bar
+      source.replace(range[0], range[1] - 1, 'true')
+    } else if (resultPath) {
+      if (relativePath === MPX_CURRENT_CHUNK) {
+        relativePath = publicPath + path.dirname(chunkGraph.getModuleChunks(module)[0].name)
+        resultPath = toPosix(path.relative(relativePath, resultPath))
+      }
       source.replace(range[0], range[1] - 1, JSON.stringify(resultPath))
     } else {
       const replaceRange = `mpx_replace_path_${key}`

package/lib/dependencies/FlagPluginDependency.js

@@ -9,6 +9,7 @@ class FlagPluginDependency extends NullDependency {
   mpxAction (module, compilation, callback) {
     const mpx = compilation.__mpx__
     mpx.isPluginMode = true
+    mpx.getEntryNode(module, 'plugin')
     return callback()
   }
 }

package/lib/dependencies/RecordIndependentDependency.js

@@ -0,0 +1,44 @@
+const NullDependency = require('webpack/lib/dependencies/NullDependency')
+const makeSerializable = require('webpack/lib/util/makeSerializable')
+
+class RecordIndependentDependency extends NullDependency {
+  constructor (root, request) {
+    super()
+    this.root = root
+    this.request = request
+  }
+
+  get type () {
+    return 'mpx record independent'
+  }
+
+  mpxAction (module, compilation, callback) {
+    const mpx = compilation.__mpx__
+    const { root, request } = this
+    mpx.independentSubpackagesMap[root] = request
+    return callback()
+  }
+
+  serialize (context) {
+    const { write } = context
+    write(this.root)
+    write(this.request)
+    super.serialize(context)
+  }
+
+  deserialize (context) {
+    const { read } = context
+    this.root = read()
+    this.request = read()
+    super.deserialize(context)
+  }
+}
+
+RecordIndependentDependency.Template = class RecordIndependentDependencyTemplate {
+  apply () {
+  }
+}
+
+makeSerializable(RecordIndependentDependency, '@mpxjs/webpack-plugin/lib/dependencies/RecordIndependentDependency')
+
+module.exports = RecordIndependentDependency

package/lib/dependencies/RecordResourceMapDependency.js

@@ -0,0 +1,62 @@
+const NullDependency = require('webpack/lib/dependencies/NullDependency')
+const makeSerializable = require('webpack/lib/util/makeSerializable')
+
+class RecordResourceMapDependency extends NullDependency {
+  constructor (resourcePath, resourceType, outputPath, packageRoot = '') {
+    super()
+    this.resourcePath = resourcePath
+    this.resourceType = resourceType
+    this.outputPath = outputPath
+    this.packageRoot = packageRoot
+  }
+
+  get type () {
+    return 'mpx record resource map'
+  }
+
+  mpxAction (module, compilation, callback) {
+    const mpx = compilation.__mpx__
+    const { resourcePath, resourceType, outputPath, packageRoot } = this
+    mpx.recordResourceMap({
+      resourcePath,
+      resourceType,
+      outputPath,
+      packageRoot,
+      recordOnly: true,
+      warn (e) {
+        compilation.warnings.push(e)
+      },
+      error (e) {
+        compilation.errors.push(e)
+      }
+    })
+    return callback()
+  }
+
+  serialize (context) {
+    const { write } = context
+    write(this.resourcePath)
+    write(this.resourceType)
+    write(this.outputPath)
+    write(this.packageRoot)
+    super.serialize(context)
+  }
+
+  deserialize (context) {
+    const { read } = context
+    this.resourcePath = read()
+    this.resourceType = read()
+    this.outputPath = read()
+    this.packageRoot = read()
+    super.deserialize(context)
+  }
+}
+
+RecordResourceMapDependency.Template = class RecordResourceMapDependencyTemplate {
+  apply () {
+  }
+}
+
+makeSerializable(RecordResourceMapDependency, '@mpxjs/webpack-plugin/lib/dependencies/RecordResourceMapDependency')
+
+module.exports = RecordResourceMapDependency

package/lib/dependencies/RemoveEntryDependency.js

@@ -0,0 +1,40 @@
+const NullDependency = require('webpack/lib/dependencies/NullDependency')
+const makeSerializable = require('webpack/lib/util/makeSerializable')
+
+class RemoveEntryDependency extends NullDependency {
+  constructor (entryName) {
+    super()
+    this.entryName = entryName
+  }
+
+  get type () {
+    return 'mpx remove entry'
+  }
+
+  serialize (context) {
+    const { write } = context
+    write(this.entryName)
+    super.serialize(context)
+  }
+
+  deserialize (context) {
+    const { read } = context
+    this.entryName = read()
+    super.deserialize(context)
+  }
+
+  mpxAction (module, compilation, callback) {
+    const { entryName } = this
+    compilation.entries.delete(entryName)
+    return callback()
+  }
+}
+
+RemoveEntryDependency.Template = class RemoveEntryDependencyTemplate {
+  apply () {
+  }
+}
+
+makeSerializable(RemoveEntryDependency, '@mpxjs/webpack-plugin/lib/dependencies/RemoveEntryDependency')
+
+module.exports = RemoveEntryDependency

package/lib/dependencies/ResolveDependency.js

@@ -37,8 +37,13 @@ class ResolveDependency extends NullDependency {
 
   // resolved可能会动态变更，需用此更新hash
   updateHash (hash, context) {
-    const resolved = this.getResolved()
-    if (resolved) hash.update(resolved)
+    this.resolved = this.getResolved()
+    const { resource, issuerResource, compilation } = this
+    if (this.resolved) {
+      hash.update(this.resolved)
+    } else {
+      compilation.errors.push(new Error(`Path ${resource} is not a page/component/static resource, which is resolved from ${issuerResource}!`))
+    }
     super.updateHash(hash, context)
   }
 
@@ -68,11 +73,11 @@ ResolveDependency.Template = class ResolveDependencyTemplate {
   }
 
   getContent (dep) {
-    const { resource, issuerResource, compilation } = dep
+    const { resolved = '', compilation } = dep
     const publicPath = compilation.outputOptions.publicPath || ''
-    const resolved = dep.getResolved()
-    if (!resolved) {
-      compilation.errors.push(new Error(`Path ${resource} is not a page/component/static resource, which is resolved from ${issuerResource}!`))
+    // for tenon
+    if (dep.compilation.__mpx__.mode === 'tenon') {
+      return `getRelativePath(currentURL, ${JSON.stringify(resolved)}) + '.js'`
     }
     return JSON.stringify(publicPath + resolved)
   }

package/lib/extractor.js

@@ -3,8 +3,8 @@ const loaderUtils = require('loader-utils')
 const parseRequest = require('./utils/parse-request')
 const toPosix = require('./utils/to-posix')
 const fixRelative = require('./utils/fix-relative')
-const normalize = require('./utils/normalize')
 const addQuery = require('./utils/add-query')
+const normalize = require('./utils/normalize')
 const { MPX_DISABLE_EXTRACTOR_CACHE, DEFAULT_RESULT_SOURCE } = require('./utils/const')
 
 module.exports = content => content
@@ -16,7 +16,7 @@ module.exports.pitch = async function (remainingRequest) {
   const type = queryObj.type
   const index = queryObj.index || 0
   const isStatic = queryObj.isStatic
-  const issuerFile = queryObj.issuerFile
+  const issuerResource = queryObj.issuerResource
   const fromImport = queryObj.fromImport
   const needBabel = queryObj.needBabel
 
@@ -36,8 +36,13 @@ module.exports.pitch = async function (remainingRequest) {
     }
   })
 
+  if (issuerResource) {
+    // 清空issuerResource/index query避免importModule对于不同的issuer无法复用模块缓存
+    remainingRequest = addQuery(remainingRequest, {}, false, ['issuerResource', 'index'])
+  }
+
   let request = remainingRequest
-  // static的情况下需要添加recordLoader记录相关静态资源的输出路径
+  // static的情况下需要用record-loader记录相关静态资源的输出路径，不能直接在这里记录，需要确保在子依赖开始构建前完成记录，因为子依赖构建时可能就需要访问当前资源的输出路径
   if (isStatic) {
     const recordLoader = normalize.lib('record-loader')
     request = `${recordLoader}!${remainingRequest}`
@@ -51,6 +56,10 @@ module.exports.pitch = async function (remainingRequest) {
     }).join('\n')
   }
 
+  let resultSource = DEFAULT_RESULT_SOURCE
+
+  if (typeof content !== 'string') return resultSource
+
   const extractedInfo = {
     content,
     index
@@ -61,8 +70,6 @@ module.exports.pitch = async function (remainingRequest) {
     extractedInfo
   })
 
-  let resultSource = DEFAULT_RESULT_SOURCE
-
   const { buildInfo } = this._module
 
   // 如果importModule子模块中包含动态特性，比如动态添加入口和静态资源输出路径，则当前extractor模块不可缓存
@@ -80,16 +87,19 @@ module.exports.pitch = async function (remainingRequest) {
       // styles为static就两种情况，一种是.mpx中使用src引用样式，第二种为css-loader中处理@import
       // 为了支持持久化缓存，.mpx中使用src引用样式对issueFile asset产生的副作用迁移到ExtractDependency中处理
       case 'styles':
-        if (issuerFile) {
+        if (issuerResource) {
+          const issuerFile = mpx.getExtractedFile(issuerResource)
           let relativePath = toPosix(path.relative(path.dirname(issuerFile), file))
           relativePath = fixRelative(relativePath, mode)
           if (fromImport) {
             resultSource += `module.exports = ${JSON.stringify(relativePath)};\n`
           } else {
             this.emitFile(issuerFile, '', undefined, {
+              skipEmit: true,
               extractedInfo: {
                 content: `@import "${relativePath}";\n`,
-                index: -1
+                index,
+                pre: true
               }
             })
           }

package/lib/file-loader.js

@@ -2,7 +2,7 @@ const path = require('path')
 const loaderUtils = require('loader-utils')
 const toPosix = require('./utils/to-posix')
 const parseRequest = require('./utils/parse-request')
-const RecordStaticResourceDependency = require('./dependencies/RecordStaticResourceDependency')
+const RecordResourceMapDependency = require('./dependencies/RecordResourceMapDependency')
 
 module.exports = function loader (content, prevOptions) {
   const options = prevOptions || loaderUtils.getOptions(this) || {}
@@ -28,7 +28,7 @@ module.exports = function loader (content, prevOptions) {
     const { resourcePath, queryObj } = parseRequest(this.resource)
     const packageRoot = queryObj.packageRoot || ''
     url = outputPath = toPosix(path.join(packageRoot, outputPath))
-    this._module.addPresentationalDependency(new RecordStaticResourceDependency(resourcePath, outputPath, packageRoot))
+    this._module.addPresentationalDependency(new RecordResourceMapDependency(resourcePath, 'staticResource', outputPath, packageRoot))
   }
 
   let publicPath = `__webpack_public_path__ + ${JSON.stringify(url)}`