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

package/lib/extractor.js

@@ -1,216 +1,109 @@
-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 loaderUtils = require('loader-utils')
 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 normalize = require('./utils/normalize')
+const addQuery = require('./utils/add-query')
+const { MPX_DISABLE_EXTRACTOR_CACHE, DEFAULT_RESULT_SOURCE } = require('./utils/const')
 
-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__
-
-  const pagesMap = mpx.pagesMap
+module.exports = content => content
 
-  const extract = mpx.extract
-  const pathHash = mpx.pathHash
-  const extractedMap = mpx.extractedMap
+module.exports.pitch = async function (remainingRequest) {
+  const mpx = this.getMpx()
   const mode = mpx.mode
-  const typeExtMap = config[mode].typeExtMap
+  const { resourcePath, queryObj } = parseRequest(this.resource)
+  const type = queryObj.type
+  const index = queryObj.index || 0
+  const isStatic = queryObj.isStatic
+  const issuerFile = queryObj.issuerFile
+  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 rootName = mainCompilation._preparedEntrypoints[0].name
-  const rootRequest = mainCompilation._preparedEntrypoints[0].request
-  const rootModule = mainCompilation.entries.find((module) => {
-    return module.rawRequest === rootRequest
+  const file = mpx.getExtractedFile(this.resource, {
+    warn: (err) => {
+      this.emitWarning(err)
+    },
+    error: (err) => {
+      this.emitError(err)
+    }
   })
-  const rootResourcePath = parseRequest(rootModule.resource).resourcePath
 
-  let resultSource = defaultResultSource
-
-  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 resourceName = path.parse(resourcePath).name
-      const outputPath = path.join(type, resourceName + pathHash(resourcePath) + typeExtMap[type])
-      return mpx.getPackageInfo({
-        resource: resourceRaw,
-        outputPath,
-        resourceType: 'staticResources',
-        warn: (err) => {
-          this.emitWarning(err)
-        }
-      }).outputPath
-    }
+  let request = remainingRequest
+  // static的情况下需要添加recordLoader记录相关静态资源的输出路径
+  if (isStatic) {
+    const recordLoader = normalize.lib('record-loader')
+    request = `${recordLoader}!${remainingRequest}`
   }
 
-  const type = options.type
-  const fromImport = options.fromImport
-  const index = +options.index || 0
-  const { queryObj } = parseRequest(this.resource)
+  let content = await this.importModule(`!!${request}`)
+  // 处理wxss-loader的返回
+  if (Array.isArray(content)) {
+    content = content.map((item) => {
+      return item[1]
+    }).join('\n')
+  }
 
-  let issuerFile
-  if (queryObj.issuerResource) {
-    issuerFile = getFile(queryObj.issuerResource, type)
+  const extractedInfo = {
+    content,
+    index
   }
 
-  const file = getFile(this.resource, type)
-  const filename = /(.*)\..*/.exec(file)[1]
+  this.emitFile(file, '', undefined, {
+    skipEmit: true,
+    extractedInfo
+  })
 
-  const sideEffects = []
+  let resultSource = DEFAULT_RESULT_SOURCE
 
-  sideEffects.push((additionalAssets) => {
-    additionalAssets[file].modules = additionalAssets[file].modules || []
-    additionalAssets[file].modules.push(this._module)
-  })
+  const { buildInfo } = this._module
 
-  if (index === -1) {
-    // 需要返回路径或产生副作用
+  // 如果importModule子模块中包含动态特性，比如动态添加入口和静态资源输出路径，则当前extractor模块不可缓存
+  if (buildInfo.assetsInfo.has(MPX_DISABLE_EXTRACTOR_CACHE)) {
+    this.cacheable(false)
+  }
+
+  const assetInfo = buildInfo.assetsInfo && buildInfo.assetsInfo.get(resourcePath)
+  if (assetInfo && assetInfo.extractedResultSource) {
+    resultSource = assetInfo.extractedResultSource
+  }
+
+  if (isStatic) {
     switch (type) {
-      // styles中index为-1就两种情况，一种是.mpx中使用src引用样式，第二种为css-loader中处理@import
+      // styles为static就两种情况，一种是.mpx中使用src引用样式，第二种为css-loader中处理@import
+      // 为了支持持久化缓存，.mpx中使用src引用样式对issueFile asset产生的副作用迁移到ExtractDependency中处理
       case 'styles':
         if (issuerFile) {
           let relativePath = toPosix(path.relative(path.dirname(issuerFile), file))
           relativePath = fixRelative(relativePath, mode)
           if (fromImport) {
-            resultSource = `module.exports = ${JSON.stringify(relativePath)};`
+            resultSource += `module.exports = ${JSON.stringify(relativePath)};\n`
           } else {
-            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)
+            this.emitFile(issuerFile, '', undefined, {
+              extractedInfo: {
+                content: `@import "${relativePath}";\n`,
+                index: -1
+              }
             })
           }
         }
         break
       case 'template':
-        resultSource = `module.exports = __webpack_public_path__ + ${JSON.stringify(file)};`
+        resultSource += `module.exports = __webpack_public_path__ + ${JSON.stringify(file)};\n`
         break
       case 'json':
-        // 目前json中index为-1时只有处理theme.json一种情况，该情况下返回的路径只能为不带有./或../开头的相对路径，否则微信小程序预览构建会报错，issue#622
-        resultSource = `module.exports = ${JSON.stringify(file)};`
+        // 目前json为static时只有处理theme.json一种情况，该情况下返回的路径只能为不带有./或../开头的相对路径，否则微信小程序预览构建会报错，issue#622
+        resultSource += `module.exports = ${JSON.stringify(file)};\n`
         break
     }
   }
 
-  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()
-    }
-  })
+  return resultSource
 }

package/lib/file-loader.js

@@ -1,14 +1,12 @@
 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 RecordStaticResourceDependency = require('./dependencies/RecordStaticResourceDependency')
 
 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,
@@ -16,10 +14,9 @@ module.exports = function loader (content, prevOptions) {
     regExp: options.regExp
   })
 
-  let outputPath
+  let outputPath = url
 
   if (options.publicPath) {
-    outputPath = url
     if (options.outputPathCDN) {
       if (typeof options.outputPathCDN === 'function') {
         outputPath = options.outputPathCDN(outputPath, this.resourcePath, context)
@@ -28,14 +25,10 @@ module.exports = function loader (content, prevOptions) {
       }
     }
   } else {
-    url = outputPath = mpx.getPackageInfo({
-      resource: this.resource,
-      outputPath: url,
-      resourceType: 'staticResources',
-      warn: (err) => {
-        this.emitWarning(err)
-      }
-    }).outputPath
+    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))
   }
 
   let publicPath = `__webpack_public_path__ + ${JSON.stringify(url)}`
@@ -51,11 +44,6 @@ 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