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

package/lib/wxs/{wxs-loader.js → loader.js}

@@ -1,10 +1,9 @@
 const NodeTargetPlugin = require('webpack/lib/node/NodeTargetPlugin')
-const SingleEntryPlugin = require('webpack/lib/SingleEntryPlugin')
+const EntryPlugin = require('webpack/lib/EntryPlugin')
 const LimitChunkCountPlugin = require('webpack/lib/optimize/LimitChunkCountPlugin')
 const path = require('path')
 const WxsPlugin = require('./WxsPlugin')
-const ChildCompileDependency = require('../dependency/ChildCompileDependency')
-const getMainCompilation = require('../utils/get-main-compilation')
+const RecordResourceMapDependency = require('../dependencies/RecordResourceMapDependency')
 const parseRequest = require('../utils/parse-request')
 const toPosix = require('../utils/to-posix')
 const fixRelative = require('../utils/fix-relative')
@@ -12,20 +11,18 @@ const config = require('../config')
 
 module.exports = function () {
   const nativeCallback = this.async()
-  const mainCompilation = getMainCompilation(this._compilation)
-  const mpx = mainCompilation.__mpx__
-  const assetsInfo = mpx.assetsInfo
+  const moduleGraph = this._compilation.moduleGraph
+  const mpx = this.getMpx()
   const mode = mpx.mode
-  const wxsMap = mpx.wxsMap
   const getOutputPath = mpx.getOutputPath
-  const rootName = mainCompilation._preparedEntrypoints[0].name
   let { resourcePath, queryObj } = parseRequest(this.resource)
-  const { resourcePath: issuerResourcePath, queryObj: issuerQueryObj } = parseRequest(queryObj.issuerResource || this._module.issuer.resource)
+  const issuer = moduleGraph.getIssuer(this._module)
+  const { resourcePath: issuerResourcePath, queryObj: issuerQueryObj } = parseRequest(queryObj.issuerResource || issuer.resource)
   const issuerPackageName = issuerQueryObj.packageRoot || mpx.currentPackageRoot || 'main'
   const pagesMap = mpx.pagesMap
   const componentsMap = mpx.componentsMap[issuerPackageName]
   const staticResourcesMap = mpx.staticResourcesMap[issuerPackageName]
-  const issuerName = pagesMap[issuerResourcePath] || componentsMap[issuerResourcePath] || staticResourcesMap[issuerResourcePath] || rootName
+  const issuerName = pagesMap[issuerResourcePath] || componentsMap[issuerResourcePath] || staticResourcesMap[issuerResourcePath]
   const issuerDir = path.dirname(issuerName)
 
   const getName = (raw) => {
@@ -39,16 +36,8 @@ module.exports = function () {
   }
   const packageRoot = queryObj.packageRoot || ''
   const ext = config[mode].wxs.ext
-  let filename = toPosix(path.join(packageRoot, getOutputPath(resourcePath, ext.slice(1), { ext })))
-
-  filename = mpx.getPackageInfo({
-    resource: this.resource,
-    outputPath: filename,
-    resourceType: 'staticResources',
-    warn: (err) => {
-      this.emitWarning(err)
-    }
-  }).outputPath
+  const filename = toPosix(path.join(packageRoot, getOutputPath(resourcePath, ext.slice(1), { ext })))
+  this._module.addPresentationalDependency(new RecordResourceMapDependency(resourcePath, 'staticResource', filename, packageRoot))
 
   const callback = (err) => {
     if (err) return nativeCallback(err)
@@ -57,47 +46,43 @@ module.exports = function () {
     nativeCallback(null, `module.exports = ${JSON.stringify(relativePath)};`)
   }
 
-  if (wxsMap[filename]) {
-    wxsMap[filename].modules.push(this._module)
-    return callback()
-  }
-
-  wxsMap[filename] = {
-    dep: null,
-    modules: [this._module]
-  }
-
   const outputOptions = {
-    filename
+    filename,
+    // 避免输出的wxs中包含es语法
+    environment: {
+      // The environment supports arrow functions ('() => { ... }').
+      arrowFunction: false,
+      // The environment supports BigInt as literal (123n).
+      bigIntLiteral: false,
+      // The environment supports const and let for variable declarations.
+      const: false,
+      // The environment supports destructuring ('{ a, b } = obj').
+      destructuring: false,
+      // The environment supports an async import() function to import EcmaScript modules.
+      dynamicImport: false,
+      // The environment supports 'for of' iteration ('for (const x of array) { ... }').
+      forOf: false,
+      // The environment supports ECMAScript Module syntax to import ECMAScript modules (import ... from '...').
+      module: false
+    }
   }
   // wxs文件必须经过pre-loader
-  const request = `!${this.remainingRequest}`
+  const request = '!!' + this.remainingRequest
   const plugins = [
     new WxsPlugin({ mode }),
     new NodeTargetPlugin(),
-    new SingleEntryPlugin(this.context, request, getName(filename)),
+    new EntryPlugin(this.context, request, { name: getName(filename) }),
     new LimitChunkCountPlugin({ maxChunks: 1 })
   ]
 
-  const childCompiler = mainCompilation.createChildCompiler(request, outputOptions, plugins)
+  const childCompiler = this._compilation.createChildCompiler(resourcePath, outputOptions, plugins)
 
-  let entryModule
-  childCompiler.hooks.thisCompilation.tap('MpxWebpackPlugin ', (compilation) => {
-    compilation.hooks.succeedEntry.tap('MpxWebpackPlugin', (entry, name, module) => {
-      entryModule = module
-      const dep = new ChildCompileDependency(entryModule)
-      wxsMap[filename].dep = dep
+  childCompiler.hooks.afterCompile.tap('MpxWebpackPlugin', (compilation) => {
+    // 持久化缓存，使用module.buildInfo.assets来输出文件
+    compilation.getAssets().forEach(({ name, source, info }) => {
+      this.emitFile(name, source.source(), undefined, info)
     })
-  })
-
-  childCompiler.hooks.afterCompile.tapAsync('MpxWebpackPlugin', (compilation, callback) => {
-    Object.keys(compilation.assets).forEach((name) => {
-      // 因为子编译会合并assetsInfo会互相覆盖，使用全局mpx对象收集完之后再合并到主assetsInfo中
-      const assetInfo = assetsInfo.get(name) || { modules: [] }
-      assetInfo.modules.push(entryModule)
-      assetsInfo.set(name, assetInfo)
-    })
-    callback()
+    compilation.clearAssets()
   })
 
   childCompiler.runAsChild((err, entries, compilation) => {
@@ -112,6 +97,12 @@ module.exports = function () {
     compilation.contextDependencies.forEach((dep) => {
       this.addContextDependency(dep)
     }, this)
+    compilation.missingDependencies.forEach((dep) => {
+      this.addMissingDependency(dep)
+    })
+    compilation.buildDependencies.forEach((dep) => {
+      this.addBuildDependency(dep)
+    })
     callback()
   })
 }

package/lib/wxs/{wxs-pre-loader.js → pre-loader.js}

@@ -2,21 +2,20 @@ const babylon = require('@babel/parser')
 const traverse = require('@babel/traverse').default
 const t = require('@babel/types')
 const generate = require('@babel/generator').default
-const getMainCompilation = require('../utils/get-main-compilation')
 const parseRequest = require('../utils/parse-request')
 const isEmptyObject = require('../utils/is-empty-object')
 const parseQuery = require('loader-utils').parseQuery
 
 module.exports = function (content) {
   this.cacheable()
-  const mainCompilation = getMainCompilation(this._compilation)
+  const mpx = this.getMpx()
   const module = this._module
-  const mode = mainCompilation.__mpx__.mode
+  const mode = mpx.mode
   const wxsModule = parseQuery(this.resourceQuery || '?').wxsModule
 
   // 处理内联wxs
   if (wxsModule) {
-    const wxsContentMap = mainCompilation.__mpx__.wxsContentMap
+    const wxsContentMap = mpx.wxsContentMap
     const resourcePath = parseRequest(this.resource).resourcePath
     content = wxsContentMap[`${resourcePath}~${wxsModule}`] || content
   }

package/lib/wxss/loader.js

@@ -5,25 +5,22 @@
 */
 const loaderUtils = require('loader-utils')
 const processCss = require('./processCss')
-const getImportPrefix = require('./getImportPrefix')
 const compileExports = require('./compile-exports')
 const createResolver = require('./createResolver')
 const isUrlRequest = require('../utils/is-url-request')
-const getMainCompilation = require('../utils/get-main-compilation')
-const addQuery = require('../utils/add-query')
+const createHelpers = require('../helpers')
 
 module.exports = function (content, map) {
   if (this.cacheable) this.cacheable()
-
   const callback = this.async()
   const query = loaderUtils.getOptions(this) || {}
-  const root = query.root
   const moduleMode = query.modules || query.module
   const camelCaseKeys = query.camelCase || query.camelcase
-  const sourceMap = this.sourceMap || false
   const resolve = createResolver(query.alias)
-  const mpx = getMainCompilation(this._compilation).__mpx__
+  const mpx = this.getMpx()
   const externals = mpx.externals
+  const root = mpx.projectRoot
+  const sourceMap = mpx.cssSourceMap || false
 
   if (sourceMap) {
     if (map) {
@@ -43,25 +40,24 @@ module.exports = function (content, map) {
     map = null
   }
 
+  const { getRequestString } = createHelpers(this)
+
   processCss(content, map, {
     mode: moduleMode ? 'local' : 'global',
     from: loaderUtils.getRemainingRequest(this).split('!').pop(),
     to: loaderUtils.getCurrentRequest(this).split('!').pop(),
-    query: query,
-    resolve: resolve,
+    query,
+    resolve,
     minimize: this.minimize,
     loaderContext: this,
-    sourceMap: sourceMap
-  }, function (err, result) {
+    sourceMap
+  }, (err, result) => {
     if (err) return callback(err)
 
     let cssAsString = JSON.stringify(result.source)
 
-    // for importing CSS
-    const importUrlPrefix = getImportPrefix(this)
-
     const alreadyImported = {}
-    const importJs = result.importItems.filter(function (imp) {
+    const importJs = result.importItems.filter((imp) => {
       if (!imp.mediaQuery) {
         if (alreadyImported[imp.url]) {
           return false
@@ -69,43 +65,35 @@ module.exports = function (content, map) {
         alreadyImported[imp.url] = true
       }
       return true
-    }).map(function (imp) {
-      if (!isUrlRequest(imp.url, root) || externals.some((external) => {
-        if (typeof external === 'string') {
-          return external === imp.url
-        } else if (external instanceof RegExp) {
-          return external.test(imp.url)
-        }
-        return false
-      })) {
+    }).map((imp) => {
+      if (!isUrlRequest(imp.url, root, externals)) {
         return 'exports.push([module.id, ' +
           JSON.stringify('@import url(' + imp.url + ');') + ', ' +
           JSON.stringify(imp.mediaQuery) + ']);'
       } else {
-        if (query.extract) {
-          const importUrlPrefix = getImportPrefix(this, true)
-          const importUrl = importUrlPrefix + addQuery(imp.url, { isStatic: true, issuerResource: this.resource })
-          return 'exports.push([module.id, ' +
-            JSON.stringify('@import "') +
-            '+ require(' + loaderUtils.stringifyRequest(this, importUrl) + ') +' +
-            JSON.stringify('";') + ', ' +
-            JSON.stringify(imp.mediaQuery) + ']);'
-        }
-        const importUrl = importUrlPrefix + imp.url
-        return 'exports.i(require(' + loaderUtils.stringifyRequest(this, importUrl) + '), ' + JSON.stringify(imp.mediaQuery) + ');'
+        const requestString = getRequestString('styles', { src: imp.url }, {
+          isStatic: true,
+          issuerFile: mpx.getExtractedFile(this.resource),
+          fromImport: true
+        })
+        return 'exports.push([module.id, ' +
+          JSON.stringify('@import "') +
+          '+ require(' + requestString + ') +' +
+          JSON.stringify('";') + ', ' +
+          JSON.stringify(imp.mediaQuery) + ']);'
       }
-    }, this).join('\n')
+    }).join('\n')
 
-    function importItemMatcher (item) {
+    const importItemMatcher = (item) => {
       const match = result.importItemRegExp.exec(item)
       const idx = +match[1]
       const importItem = result.importItems[idx]
-      const importUrl = importUrlPrefix + importItem.url
+      const importUrl = importItem.url
       return '" + require(' + loaderUtils.stringifyRequest(this, importUrl) + ').locals' +
         '[' + JSON.stringify(importItem.export) + '] + "'
     }
 
-    cssAsString = cssAsString.replace(result.importItemRegExpG, importItemMatcher.bind(this))
+    cssAsString = cssAsString.replace(result.importItemRegExpG, importItemMatcher)
 
     // helper for ensuring valid CSS strings from requires
     let urlEscapeHelper = ''
@@ -113,7 +101,7 @@ module.exports = function (content, map) {
     if (query.url !== false && result.urlItems.length > 0) {
       urlEscapeHelper = 'var escape = require(' + loaderUtils.stringifyRequest(this, '!!' + require.resolve('./url/escape.js')) + ');\n'
 
-      cssAsString = cssAsString.replace(result.urlItemRegExpG, function (item) {
+      cssAsString = cssAsString.replace(result.urlItemRegExpG, (item) => {
         const match = result.urlItemRegExp.exec(item)
         let idx = +match[1]
         const urlItem = result.urlItems[idx]
@@ -129,10 +117,10 @@ module.exports = function (content, map) {
         }
         urlRequest = url
         return '" + escape(require(' + loaderUtils.stringifyRequest(this, urlRequest) + ')) + "'
-      }.bind(this))
+      })
     }
 
-    let exportJs = compileExports(result, importItemMatcher.bind(this), camelCaseKeys)
+    let exportJs = compileExports(result, importItemMatcher, camelCaseKeys)
     if (exportJs) {
       exportJs = 'exports.locals = ' + exportJs + ';'
     }
@@ -165,5 +153,5 @@ module.exports = function (content, map) {
       moduleJs + '\n\n' +
       '// exports\n' +
       exportJs)
-  }.bind(this))
+  })
 }

package/lib/wxss/localsLoader.js

@@ -5,7 +5,6 @@
 */
 var loaderUtils = require('loader-utils')
 var processCss = require('./processCss')
-var getImportPrefix = require('./getImportPrefix')
 var compileExports = require('./compile-exports')
 var createResolver = require('./createResolver')
 
@@ -26,14 +25,11 @@ module.exports = function (content) {
   }, function (err, result) {
     if (err) return callback(err)
 
-    // for importing CSS
-    var importUrlPrefix = getImportPrefix(this, query)
-
     function importItemMatcher (item) {
       var match = result.importItemRegExp.exec(item)
       var idx = +match[1]
       var importItem = result.importItems[idx]
-      var importUrl = importUrlPrefix + importItem.url
+      var importUrl = importItem.url
       return '" + require(' + loaderUtils.stringifyRequest(this, importUrl) + ')' +
         '[' + JSON.stringify(importItem.export) + '] + "'
     }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mpxjs/webpack-plugin",
-  "version": "2.6.110",
+  "version": "2.7.0-beta.10",
   "description": "mpx compile core",
   "keywords": [
     "mpx"
@@ -40,7 +40,7 @@
     "html-minifier": "^3.5.8",
     "icss-utils": "^2.1.0",
     "json5": "^2.1.3",
-    "loader-utils": "1.1.0",
+    "loader-utils": "^2.0.2",
     "lodash": "^4.17.15",
     "lodash.camelcase": "^4.3.0",
     "lru-cache": "^4.1.2",
@@ -54,14 +54,10 @@
     "postcss-modules-values": "^1.3.0",
     "postcss-selector-parser": "^2.0.0",
     "postcss-value-parser": "^3.3.0",
-    "resolve": "^1.5.0",
-    "source-list-map": "^2.0.0",
-    "webpack-sources": "^1.1.0"
+    "source-list-map": "^2.0.0"
   },
   "peerDependencies": {
-    "css-loader": "^0.28.10",
-    "webpack": "^4.0.0",
-    "webpack-cli": "^3.0.0"
+    "webpack": "^5.48.0"
   },
   "publishConfig": {
     "registry": "https://registry.npmjs.org"
@@ -81,5 +77,5 @@
     "@types/babel-traverse": "^6.25.4",
     "@types/babel-types": "^7.0.4"
   },
-  "gitHead": "a772b52decbf4a3bdc3b5b608a18327bce453b6c"
+  "gitHead": "fc256c06948aa20fca8acfdf29ec57ea453647d7"
 }

package/lib/built-in-loader.js

@@ -1,49 +0,0 @@
-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/content-loader.js

@@ -1,13 +0,0 @@
-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

@@ -1,24 +0,0 @@
-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

@@ -1,26 +0,0 @@
-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

@@ -1,23 +0,0 @@
-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/dependency/ResolveDependency.js

@@ -1,49 +0,0 @@
-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