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

package/README.md

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

package/lib/built-in-loader.js

@@ -0,0 +1,49 @@
+const parseComponent = require('./parser')
+const loaderUtils = require('loader-utils')
+const parseRequest = require('./utils/parse-request')
+const normalize = require('./utils/normalize')
+const selectorPath = normalize.lib('selector')
+const genComponentTag = require('./utils/gen-component-tag')
+const getMainCompilation = require('./utils/get-main-compilation')
+
+module.exports = function (content) {
+  this.cacheable()
+  const mainCompilation = getMainCompilation(this._compilation)
+  const mpx = mainCompilation.__mpx__
+  if (!mpx) {
+    return content
+  }
+  const mode = mpx.mode
+  const env = mpx.env
+  const defs = mpx.defs
+  const resourcePath = parseRequest(this.resource).resourcePath
+  const parts = parseComponent(content, {
+    filePath: resourcePath,
+    needMap: this.sourceMap,
+    mode,
+    defs,
+    env
+  })
+
+  let output = ''
+
+  // 内建组件编写规范比较统一，不需要处理太多情况
+  if (parts.template) {
+    output += genComponentTag(parts.template)
+  }
+
+  if (parts.script) {
+    output += '\n' + genComponentTag(parts.script, (script) => {
+      let content = ''
+      if (parts.styles && parts.styles.length) {
+        parts.styles.forEach((style, i) => {
+          const requestString = loaderUtils.stringifyRequest(this, `builtInComponent.styl!=!${selectorPath}?type=styles&index=${i}!${loaderUtils.getRemainingRequest(this)}`)
+          content += `\n  import ${requestString}`
+        })
+      }
+      content += script.content
+      return content
+    })
+  }
+  return output
+}

package/lib/config.js

@@ -356,20 +356,6 @@ 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/content-loader.js

@@ -0,0 +1,13 @@
+module.exports = function (content) {
+  if (!this.__mpx__) {
+    return content
+  }
+  // todo 由于additionalAssets阶段还会进行一次依赖同步，此处获取的依赖不一定是最终的依赖，可能会有bad case
+  this.__mpx__.fileDependencies.forEach(file => {
+    this.addDependency(file)
+  })
+  this.__mpx__.contextDependencies.forEach(context => {
+    this.addContextDependency(context)
+  })
+  return this.__mpx__.content
+}

package/lib/dependency/ChildCompileDependency.js

@@ -0,0 +1,24 @@
+const NullDependency = require('webpack/lib/dependencies/NullDependency')
+
+class ChildCompileDependency extends NullDependency {
+  constructor (module) {
+    super()
+    this.childCompileEntryModule = module
+  }
+
+  get type () {
+    return 'mpx child compile'
+  }
+
+  updateHash (hash) {
+    super.updateHash(hash)
+    hash.update(this.childCompileEntryModule.identifier())
+  }
+}
+
+ChildCompileDependency.Template = class ChildCompileDependencyTemplate {
+  apply () {
+  }
+}
+
+module.exports = ChildCompileDependency

package/lib/dependency/InjectDependency.js

@@ -0,0 +1,26 @@
+const NullDependency = require('webpack/lib/dependencies/NullDependency')
+
+class InjectDependency extends NullDependency {
+  constructor (options) {
+    super()
+    this.content = options.content
+    this.index = options.index || 0
+  }
+
+  get type () {
+    return 'mpx inject'
+  }
+
+  updateHash (hash) {
+    super.updateHash(hash)
+    hash.update(this.content)
+  }
+}
+
+InjectDependency.Template = class InjectDependencyTemplate {
+  apply (dep, source) {
+    source.insert(dep.index, '/* mpx inject */ ' + dep.content)
+  }
+}
+
+module.exports = InjectDependency

package/lib/dependency/RemovedModuleDependency.js

@@ -0,0 +1,23 @@
+const ModuleDependency = require('webpack/lib/dependencies//ModuleDependency')
+
+class RemovedModuleDependency extends ModuleDependency {
+  constructor (request, removedModule, range) {
+    super(request)
+    this.removedModule = removedModule
+    this.range = range
+  }
+
+  get type () {
+    return 'removed module'
+  }
+}
+
+RemovedModuleDependency.Template = class RemovedModuleDependencyTemplate {
+  apply (dep, source) {
+    if (dep.range) {
+      source.replace(dep.range[0], dep.range[1] - 1, '')
+    }
+  }
+}
+
+module.exports = RemovedModuleDependency

package/lib/{dependencies → dependency}/ReplaceDependency.js

@@ -1,5 +1,4 @@
 const NullDependency = require('webpack/lib/dependencies/NullDependency')
-const makeSerializable = require('webpack/lib/util/makeSerializable')
 
 class ReplaceDependency extends NullDependency {
   constructor (replacement, range) {
@@ -12,23 +11,9 @@ class ReplaceDependency extends NullDependency {
     return 'mpx replace'
   }
 
-  updateHash (hash, context) {
+  updateHash (hash) {
+    super.updateHash(hash)
     hash.update(this.replacement)
-    super.updateHash(hash, context)
-  }
-
-  serialize (context) {
-    const { write } = context
-    write(this.replacement)
-    write(this.range)
-    super.serialize(context)
-  }
-
-  deserialize (context) {
-    const { read } = context
-    this.replacement = read()
-    this.range = read()
-    super.deserialize(context)
   }
 }
 
@@ -38,6 +23,4 @@ ReplaceDependency.Template = class ReplaceDependencyTemplate {
   }
 }
 
-makeSerializable(ReplaceDependency, '@mpxjs/webpack-plugin/lib/dependencies/ReplaceDependency')
-
 module.exports = ReplaceDependency

package/lib/dependency/ResolveDependency.js

@@ -0,0 +1,49 @@
+const NullDependency = require('webpack/lib/dependencies/NullDependency')
+const parseRequest = require('../utils/parse-request')
+
+class ResolveDependency extends NullDependency {
+  constructor (resource, packageName, pagesMap, componentsMap, staticResourcesMap, publicPath, range, issuerResource, compilation) {
+    super()
+    this.resource = resource
+    this.packageName = packageName
+    this.pagesMap = pagesMap
+    this.componentsMap = componentsMap
+    this.staticResourcesMap = staticResourcesMap
+    this.publicPath = publicPath
+    this.range = range
+    this.issuerResource = issuerResource
+    this.compilation = compilation
+  }
+
+  get type () {
+    return 'mpx resolve'
+  }
+
+  updateHash (hash) {
+    super.updateHash(hash)
+    hash.update(this.resource)
+  }
+}
+
+ResolveDependency.Template = class ResolveDependencyTemplate {
+  apply (dep, source) {
+    const content = this.getContent(dep)
+    source.replace(dep.range[0], dep.range[1] - 1, content)
+  }
+
+  getContent (dep) {
+    const resourcePath = parseRequest(dep.resource).resourcePath
+    const pagesMap = dep.pagesMap
+    const componentsMap = dep.componentsMap[dep.packageName]
+    const mainComponentsMap = dep.componentsMap.main
+    const staticResourcesMap = dep.staticResourcesMap[dep.packageName]
+    const mainStaticResourcesMap = dep.staticResourcesMap.main
+    const resolved = pagesMap[resourcePath] || componentsMap[resourcePath] || mainComponentsMap[resourcePath] || staticResourcesMap[resourcePath] || mainStaticResourcesMap[resourcePath] || ''
+    if (!resolved) {
+      dep.compilation.errors.push(new Error(`Path ${dep.resource} is not a page/component/static resource, which is resolved from ${dep.issuerResource}!`))
+    }
+    return JSON.stringify(dep.publicPath + resolved)
+  }
+}
+
+module.exports = ResolveDependency

package/lib/extractor.js

@@ -1,119 +1,215 @@
-const path = require('path')
 const loaderUtils = require('loader-utils')
+const path = require('path')
+const NodeTemplatePlugin = require('webpack/lib/node/NodeTemplatePlugin')
+const NodeTargetPlugin = require('webpack/lib/node/NodeTargetPlugin')
+const LibraryTemplatePlugin = require('webpack/lib/LibraryTemplatePlugin')
+const SingleEntryPlugin = require('webpack/lib/SingleEntryPlugin')
+const LimitChunkCountPlugin = require('webpack/lib/optimize/LimitChunkCountPlugin')
+const ChildCompileDependency = require('./dependency/ChildCompileDependency')
+const normalize = require('./utils/normalize')
 const parseRequest = require('./utils/parse-request')
+const getMainCompilation = require('./utils/get-main-compilation')
 const toPosix = require('./utils/to-posix')
+const config = require('./config')
 const fixRelative = require('./utils/fix-relative')
-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
+const defaultResultSource = '// removed by extractor'
+
+module.exports = function (content) {
+  this.cacheable()
+  const options = loaderUtils.getOptions(this) || {}
+
+  const mainCompilation = getMainCompilation(this._compilation)
+  const mpx = mainCompilation.__mpx__
 
-module.exports.pitch = async function (remainingRequest) {
-  const mpx = this.getMpx()
+  const pagesMap = mpx.pagesMap
+  const getOutputPath = mpx.getOutputPath
+
+  const extract = mpx.extract
+  const extractedMap = mpx.extractedMap
   const mode = mpx.mode
-  const { resourcePath, queryObj } = parseRequest(this.resource)
-  const type = queryObj.type
-  const index = queryObj.index || 0
-  const isStatic = queryObj.isStatic
-  const issuerResource = queryObj.issuerResource
-  const fromImport = queryObj.fromImport
-  const needBabel = queryObj.needBabel
-
-  if (needBabel) {
-    // 创建js request应用babel
-    let request = addQuery(this.request, {}, true, ['needBabel'])
-    const fakeRequest = addQuery(`${resourcePath}.js`, queryObj)
-    return `module.exports = require(${loaderUtils.stringifyRequest(this, `${fakeRequest}!=!${request}`)});\n`
-  }
+  const typeExtMap = config[mode].typeExtMap
 
-  const file = mpx.getExtractedFile(this.resource, {
-    warn: (err) => {
-      this.emitWarning(err)
-    },
-    error: (err) => {
-      this.emitError(err)
-    }
+  const rootName = mainCompilation._preparedEntrypoints[0].name
+  const rootRequest = mainCompilation._preparedEntrypoints[0].request
+  const rootModule = mainCompilation.entries.find((module) => {
+    return module.rawRequest === rootRequest
   })
+  const rootResourcePath = parseRequest(rootModule.resource).resourcePath
 
-  if (issuerResource) {
-    // 清空issuerResource/index query避免importModule对于不同的issuer无法复用模块缓存
-    remainingRequest = addQuery(remainingRequest, {}, false, ['issuerResource', 'index'])
-  }
+  let resultSource = defaultResultSource
 
-  let request = remainingRequest
-  // static的情况下需要用record-loader记录相关静态资源的输出路径，不能直接在这里记录，需要确保在子依赖开始构建前完成记录，因为子依赖构建时可能就需要访问当前资源的输出路径
-  if (isStatic) {
-    const recordLoader = normalize.lib('record-loader')
-    request = `${recordLoader}!${remainingRequest}`
-  }
-
-  let content = await this.importModule(`!!${request}`)
-  // 处理wxss-loader的返回
-  if (Array.isArray(content)) {
-    content = content.map((item) => {
-      return item[1]
-    }).join('\n')
+  const getFile = (resourceRaw, type) => {
+    const { resourcePath, queryObj } = parseRequest(resourceRaw)
+    const currentPackageName = queryObj.packageRoot || mpx.currentPackageRoot || 'main'
+    const componentsMap = mpx.componentsMap[currentPackageName]
+    let filename = pagesMap[resourcePath] || componentsMap[resourcePath]
+    if (!filename && resourcePath === rootResourcePath) {
+      filename = rootName
+    }
+    if (filename) {
+      return filename + typeExtMap[type]
+    } else {
+      const outputPath = getOutputPath(resourcePath, type, { ext: typeExtMap[type] })
+      return mpx.getPackageInfo({
+        resource: resourceRaw,
+        outputPath,
+        resourceType: 'staticResources',
+        warn: (err) => {
+          this.emitWarning(err)
+        }
+      }).outputPath
+    }
   }
 
-  let resultSource = DEFAULT_RESULT_SOURCE
-
-  if (typeof content !== 'string') return resultSource
+  const type = options.type
+  const fromImport = options.fromImport
+  const index = +options.index || 0
+  const { queryObj } = parseRequest(this.resource)
 
-  const extractedInfo = {
-    content,
-    index
+  let issuerFile
+  if (queryObj.issuerResource) {
+    issuerFile = getFile(queryObj.issuerResource, type)
   }
 
-  this.emitFile(file, '', undefined, {
-    skipEmit: true,
-    extractedInfo
-  })
-
-  const { buildInfo } = this._module
+  const file = getFile(this.resource, type)
+  const filename = /(.*)\..*/.exec(file)[1]
 
-  // 如果importModule子模块中包含动态特性，比如动态添加入口和静态资源输出路径，则当前extractor模块不可缓存
-  if (buildInfo.assetsInfo.has(MPX_DISABLE_EXTRACTOR_CACHE)) {
-    this.cacheable(false)
-  }
+  const sideEffects = []
 
-  const assetInfo = buildInfo.assetsInfo && buildInfo.assetsInfo.get(resourcePath)
-  if (assetInfo && assetInfo.extractedResultSource) {
-    resultSource = assetInfo.extractedResultSource
-  }
+  sideEffects.push((additionalAssets) => {
+    additionalAssets[file].modules = additionalAssets[file].modules || []
+    additionalAssets[file].modules.push(this._module)
+  })
 
-  if (isStatic) {
+  if (index === -1) {
+    // 需要返回路径或产生副作用
     switch (type) {
-      // styles为static就两种情况，一种是.mpx中使用src引用样式，第二种为css-loader中处理@import
-      // 为了支持持久化缓存，.mpx中使用src引用样式对issueFile asset产生的副作用迁移到ExtractDependency中处理
+      // styles中index为-1就两种情况，一种是.mpx中使用src引用样式，第二种为css-loader中处理@import
       case 'styles':
-        if (issuerResource) {
-          const issuerFile = mpx.getExtractedFile(issuerResource)
+        if (issuerFile) {
           let relativePath = toPosix(path.relative(path.dirname(issuerFile), file))
           relativePath = fixRelative(relativePath, mode)
           if (fromImport) {
-            resultSource += `module.exports = ${JSON.stringify(relativePath)};\n`
+            resultSource = `module.exports = ${JSON.stringify(relativePath)};`
           } else {
-            this.emitFile(issuerFile, '', undefined, {
-              skipEmit: true,
-              extractedInfo: {
-                content: `@import "${relativePath}";\n`,
-                index,
-                pre: true
-              }
+            sideEffects.push((additionalAssets) => {
+              additionalAssets[issuerFile] = additionalAssets[issuerFile] || []
+              additionalAssets[issuerFile].prefix = additionalAssets[issuerFile].prefix || []
+              additionalAssets[issuerFile].prefix.push(`@import "${relativePath}";\n`)
+              additionalAssets[issuerFile].relativeModules = additionalAssets[issuerFile].relativeModules || []
+              additionalAssets[issuerFile].relativeModules.push(this._module)
             })
           }
         }
         break
       case 'template':
-        resultSource += `module.exports = __webpack_public_path__ + ${JSON.stringify(file)};\n`
+        resultSource = `module.exports = __webpack_public_path__ + ${JSON.stringify(file)};`
         break
       case 'json':
-        // 目前json为static时只有处理theme.json一种情况，该情况下返回的路径只能为不带有./或../开头的相对路径，否则微信小程序预览构建会报错，issue#622
-        resultSource += `module.exports = ${JSON.stringify(file)};\n`
+        // 目前json中index为-1时只有处理theme.json一种情况，该情况下返回的路径只能为不带有./或../开头的相对路径，否则微信小程序预览构建会报错，issue#622
+        resultSource = `module.exports = ${JSON.stringify(file)};`
         break
     }
   }
 
-  return resultSource
+  const id = `${file}:${index}:${issuerFile}:${fromImport}`
+
+  // 由于webpack中moduleMap只在compilation维度有效，不同子编译之间可能会对相同的引用文件进行重复的无效抽取，建立全局extractedMap避免这种情况出现
+  if (extractedMap[id]) {
+    extractedMap[id].modules.push(this._module)
+    return extractedMap[id].resultSource
+  }
+  const nativeCallback = this.async()
+  extractedMap[id] = {
+    resultSource,
+    dep: null,
+    modules: [this._module]
+  }
+
+  // 使用子编译器生成需要抽离的json，styles和template
+  const contentLoader = normalize.lib('content-loader')
+  const request = `!!${contentLoader}?${JSON.stringify(options)}!${this.resource}`
+
+  const childFilename = 'extractor-filename'
+  const outputOptions = {
+    filename: childFilename
+  }
+  const childCompiler = mainCompilation.createChildCompiler(request, outputOptions, [
+    new NodeTemplatePlugin(outputOptions),
+    new LibraryTemplatePlugin(null, 'commonjs2'),
+    new NodeTargetPlugin(),
+    new SingleEntryPlugin(this.context, request, filename),
+    new LimitChunkCountPlugin({ maxChunks: 1 })
+  ])
+
+  childCompiler.hooks.thisCompilation.tap('MpxWebpackPlugin', (compilation) => {
+    compilation.hooks.normalModuleLoader.tap('MpxWebpackPlugin', (loaderContext) => {
+      // 传递编译结果，子编译器进入content-loader后直接输出
+      loaderContext.__mpx__ = {
+        content,
+        fileDependencies: this.getDependencies(),
+        contextDependencies: this.getContextDependencies()
+      }
+    })
+    compilation.hooks.succeedEntry.tap('MpxWebpackPlugin', (entry, name, module) => {
+      const dep = new ChildCompileDependency(module)
+      extractedMap[id].dep = dep
+    })
+  })
+
+  let source
+  childCompiler.hooks.afterCompile.tapAsync('MpxWebpackPlugin', (compilation, callback) => {
+    source = compilation.assets[childFilename] && compilation.assets[childFilename].source()
+
+    // Remove all chunk assets
+    compilation.chunks.forEach((chunk) => {
+      chunk.files.forEach((file) => {
+        delete compilation.assets[file]
+      })
+    })
+
+    callback()
+  })
+
+  childCompiler.runAsChild((err, entries, compilation) => {
+    if (err) return nativeCallback(err)
+    if (compilation.errors.length > 0) {
+      mainCompilation.errors.push(...compilation.errors)
+    }
+
+    compilation.fileDependencies.forEach((dep) => {
+      this.addDependency(dep)
+    }, this)
+    compilation.contextDependencies.forEach((dep) => {
+      this.addContextDependency(dep)
+    }, this)
+
+    if (!source) {
+      return nativeCallback(new Error('Didn\'t get a result from child compiler'))
+    }
+
+    try {
+      let text = this.exec(source, request)
+      if (Array.isArray(text)) {
+        text = text.map((item) => {
+          return item[1]
+        }).join('\n')
+      }
+
+      extract(text, file, index, sideEffects)
+
+      // 在production模式下移除extract残留空模块
+      if (resultSource === defaultResultSource && this.minimize) {
+        this._module.needRemove = true
+      }
+    } catch (err) {
+      return nativeCallback(err)
+    }
+    if (resultSource) {
+      nativeCallback(null, resultSource)
+    } else {
+      nativeCallback()
+    }
+  })
 }

package/lib/file-loader.js

@@ -1,12 +1,14 @@
 const path = require('path')
 const loaderUtils = require('loader-utils')
+const getMainCompilation = require('./utils/get-main-compilation')
 const toPosix = require('./utils/to-posix')
-const parseRequest = require('./utils/parse-request')
-const RecordResourceMapDependency = require('./dependencies/RecordResourceMapDependency')
 
 module.exports = function loader (content, prevOptions) {
   const options = prevOptions || loaderUtils.getOptions(this) || {}
   const context = options.context || this.rootContext
+  const mainCompilation = getMainCompilation(this._compilation)
+  const mpx = mainCompilation.__mpx__
+  const assetsInfo = mpx.assetsInfo
 
   let url = loaderUtils.interpolateName(this, options.name, {
     context,
@@ -14,9 +16,10 @@ module.exports = function loader (content, prevOptions) {
     regExp: options.regExp
   })
 
-  let outputPath = url
+  let outputPath
 
   if (options.publicPath) {
+    outputPath = url
     if (options.outputPathCDN) {
       if (typeof options.outputPathCDN === 'function') {
         outputPath = options.outputPathCDN(outputPath, this.resourcePath, context)
@@ -25,10 +28,14 @@ module.exports = function loader (content, prevOptions) {
       }
     }
   } else {
-    const { resourcePath, queryObj } = parseRequest(this.resource)
-    const packageRoot = queryObj.packageRoot || ''
-    url = outputPath = toPosix(path.join(packageRoot, outputPath))
-    this._module.addPresentationalDependency(new RecordResourceMapDependency(resourcePath, 'staticResource', outputPath, packageRoot))
+    url = outputPath = mpx.getPackageInfo({
+      resource: this.resource,
+      outputPath: url,
+      resourceType: 'staticResources',
+      warn: (err) => {
+        this.emitWarning(err)
+      }
+    }).outputPath
   }
 
   let publicPath = `__webpack_public_path__ + ${JSON.stringify(url)}`
@@ -44,6 +51,11 @@ module.exports = function loader (content, prevOptions) {
     publicPath = JSON.stringify(publicPath)
   }
 
+  // 因为子编译会合并assetsInfo会互相覆盖，使用全局mpx对象收集完之后再合并到主assetsInfo中
+  const assetInfo = assetsInfo.get(outputPath) || { modules: [] }
+  assetInfo.modules.push(this._module)
+  assetsInfo.set(outputPath, assetInfo)
+
   this.emitFile(outputPath, content)
 
   // TODO revert to ES2015 Module export, when new CSS Pipeline is in place