@mpxjs/webpack-plugin 2.7.44 → 2.7.47

package/lib/helpers.js

@@ -16,6 +16,8 @@ module.exports = function createHelpers (loaderContext) {
   const rawRequest = loaderUtils.getRemainingRequest(loaderContext)
   const { resourcePath, queryObj } = parseRequest(loaderContext.resource)
 
+  const { mode, env } = loaderContext.getMpx() || {}
+
   function getRequire (type, part, extraOptions, index) {
     return 'require(' + getRequestString(type, part, extraOptions, index) + ')'
   }
@@ -66,7 +68,7 @@ module.exports = function createHelpers (loaderContext) {
       return loaderUtils.stringifyRequest(loaderContext, addQuery(src, options, true))
     } else {
       const fakeRequest = getFakeRequest(type, part)
-      const request = `${selectorPath}!${addQuery(rawRequest, options, true)}`
+      const request = `${selectorPath}?mode=${mode}&env=${env}!${addQuery(rawRequest, options, true)}`
       return loaderUtils.stringifyRequest(loaderContext, `${fakeRequest}!=!${request}`)
     }
   }

package/lib/index.js

@@ -537,7 +537,6 @@ class MpxWebpackPlugin {
           assetsASTsMap: new Map(),
           usingComponents: {},
           // todo es6 map读写性能高于object，之后会逐步替换
-          vueContentCache: new Map(),
           wxsAssetsCache: new Map(),
           currentPackageRoot: '',
           wxsContentMap: {},
@@ -941,7 +940,7 @@ class MpxWebpackPlugin {
         }
       })
 
-      normalModuleFactory.hooks.parser.for('javascript/auto').tap('MpxWebpackPlugin', (parser) => {
+      const normalModuleFactoryParserCallback = (parser) => {
         parser.hooks.call.for('__mpx_resolve_path__').tap('MpxWebpackPlugin', (expr) => {
           if (expr.arguments[0]) {
             const resource = expr.arguments[0].value
@@ -1152,7 +1151,10 @@ class MpxWebpackPlugin {
           parser.hooks.callMemberChain.for('mpx').tap('MpxWebpackPlugin', injectSrcModeForTransApi)
           parser.hooks.callMemberChain.for('wx').tap('MpxWebpackPlugin', injectSrcModeForTransApi)
         }
-      })
+      }
+      normalModuleFactory.hooks.parser.for('javascript/auto').tap('MpxWebpackPlugin', normalModuleFactoryParserCallback)
+      normalModuleFactory.hooks.parser.for('javascript/dynamic').tap('MpxWebpackPlugin', normalModuleFactoryParserCallback)
+      normalModuleFactory.hooks.parser.for('javascript/esm').tap('MpxWebpackPlugin', normalModuleFactoryParserCallback)
 
       // 为了正确生成sourceMap，将该步骤由原来的compile.hooks.emit迁移到compilation.hooks.processAssets
       compilation.hooks.processAssets.tap({

package/lib/loader.js

@@ -46,7 +46,6 @@ module.exports = function (content) {
   const globalSrcMode = mpx.srcMode
   const localSrcMode = queryObj.mode
   const srcMode = localSrcMode || globalSrcMode
-  const vueContentCache = mpx.vueContentCache
   const autoScope = matchCondition(resourcePath, mpx.autoScopeRules)
 
   let ctorType = 'app'
@@ -60,7 +59,7 @@ module.exports = function (content) {
 
   // 支持资源query传入isPage或isComponent支持页面/组件单独编译
   if (ctorType === 'app' && (queryObj.isComponent || queryObj.isPage)) {
-    const entryName = getEntryName(this) || (queryObj.isComponent ? 'noEntryComponent' : 'noEntryPage')
+    const entryName = getEntryName(this) || mpx.getOutputPath(resourcePath, queryObj.isComponent ? 'component' : 'page')
     ctorType = queryObj.isComponent ? 'component' : 'page'
     this._module.addPresentationalDependency(new RecordResourceMapDependency(resourcePath, ctorType, entryName, packageRoot))
   }
@@ -94,10 +93,6 @@ module.exports = function (content) {
       })
     },
     (callback) => {
-      // web输出模式下没有任何inject，可以通过cache直接返回，由于读取src json可能会新增模块依赖，需要在之后返回缓存内容
-      if (vueContentCache.has(filePath)) {
-        return callback(null, vueContentCache.get(filePath))
-      }
       const hasScoped = parts.styles.some(({ scoped }) => scoped) || autoScope
       const templateAttrs = parts.template && parts.template.attrs
       const hasComment = templateAttrs && templateAttrs.comments
@@ -204,7 +199,6 @@ module.exports = function (content) {
         ], (err, scriptRes) => {
           if (err) return callback(err)
           output += scriptRes.output
-          vueContentCache.set(filePath, output)
           callback(null, output)
         })
       }

package/lib/selector.js

@@ -3,17 +3,17 @@ const parseRequest = require('./utils/parse-request')
 
 module.exports = function (content) {
   this.cacheable()
-  // todo 移除mpx访问依赖，支持thread-loader
-  const mpx = this.getMpx()
-  if (!mpx) {
+
+  // 移除mpx访问依赖，支持 thread-loader
+  const { mode, env } = this.getOptions() || {}
+  if (!mode && !env) {
     return content
   }
+
   const { queryObj } = parseRequest(this.resource)
   const ctorType = queryObj.ctorType
   const type = queryObj.type
   const index = queryObj.index || 0
-  const mode = mpx.mode
-  const env = mpx.env
   const filePath = this.resourcePath
   const parts = parseComponent(content, {
     filePath,

package/lib/web/processScript.js

@@ -2,6 +2,7 @@ const genComponentTag = require('../utils/gen-component-tag')
 const loaderUtils = require('loader-utils')
 const addQuery = require('../utils/add-query')
 const normalize = require('../utils/normalize')
+const parseRequest = require('../utils/parse-request')
 const optionProcessorPath = normalize.lib('runtime/optionProcessor')
 const tabBarContainerPath = normalize.lib('runtime/components/web/mpx-tab-bar-container.vue')
 const tabBarPath = normalize.lib('runtime/components/web/mpx-tab-bar.vue')
@@ -49,6 +50,7 @@ module.exports = function (script, {
     projectRoot
   } = mpx
 
+  const { queryObj } = parseRequest(loaderContext.resource)
   const tabBar = jsonConfig.tabBar
 
   const emitWarning = (msg) => {
@@ -219,7 +221,8 @@ module.exports = function (script, {
       // 为了正确获取currentSrcMode便于运行时进行转换，对于src引入的组件script采用require方式引入(由于webpack会将import的执行顺序上升至最顶)，这意味着对于src引入脚本中的named export将不会生效，不过鉴于mpx和小程序中本身也没有在组件script中声明export的用法，所以应该没有影响
       content += '\n\n\n/** Source start **/\n'
       content += script.src
-        ? `require(${stringifyRequest(script.src)})\n`
+        // 继承单文件组件query避免多个单文件模块实例引用一个src模块，因模块缓存导致createComponent不执行的问题
+        ? `require(${stringifyRequest(addQuery(script.src, queryObj))})\n`
         : script.content
       content += '\n/** Source end **/\n\n\n'
       // createApp/Page/Component执行完成后立刻获取当前的option并暂存

package/lib/wxs/WxsPlugin.js

@@ -23,6 +23,14 @@ class WxsPlugin {
       normalModuleFactory.hooks.parser
         .for('javascript/auto')
         .tap('WxsPlugin', handler)
+
+      normalModuleFactory.hooks.parser
+        .for('javascript/dynamic')
+        .tap('WxsPlugin', handler)
+
+      normalModuleFactory.hooks.parser
+        .for('javascript/esm')
+        .tap('WxsPlugin', handler)
     })
   }
 }

package/lib/wxs/WxsTemplatePlugin.js

@@ -1,6 +1,49 @@
 const config = require('../config')
 const { ConcatSource } = require('webpack').sources
 const JavascriptModulesPlugin = require('webpack/lib/javascript/JavascriptModulesPlugin')
+const RuntimeGlobals = require('webpack/lib/RuntimeGlobals')
+const HelperRuntimeModule = require('webpack/lib/runtime/HelperRuntimeModule')
+const Template = require('webpack/lib/Template')
+
+class MakeNamespaceObjectRuntimeModule extends HelperRuntimeModule {
+  constructor () {
+    super('make namespace object')
+  }
+
+  generate () {
+    const { runtimeTemplate } = this.compilation
+    const fn = RuntimeGlobals.makeNamespaceObject
+    return Template.asString([
+      '// define __esModule on exports',
+      `${fn} = ${runtimeTemplate.basicFunction('exports', [
+        'exports.__esModule = true;'
+      ])};`
+    ])
+  }
+}
+
+class CompatGetDefaultExportRuntimeModule extends HelperRuntimeModule {
+  constructor () {
+    super('compat get default export')
+  }
+
+  generate () {
+    const { runtimeTemplate } = this.compilation
+    const fn = RuntimeGlobals.compatGetDefaultExport
+    return Template.asString([
+      '// getDefaultExport function for compatibility with non-harmony modules',
+      `${fn} = ${runtimeTemplate.basicFunction('module', [
+        'var getter = module && module.__esModule ?',
+        Template.indent([
+          `${runtimeTemplate.returningFunction('module["default"]')} :`,
+          `${runtimeTemplate.returningFunction('module')};`
+        ]),
+        'getter.a = getter();',
+        'return getter;'
+      ])};`
+    ])
+  }
+}
 
 module.exports = class WxsTemplatePlugin {
   constructor (options = { mode: 'wx' }) {
@@ -20,7 +63,34 @@ module.exports = class WxsTemplatePlugin {
       return new ConcatSource(prefix, source)
     })
 
-    // todo webpack5的新的代码生成模式下完美支持.d.r.n的成本较高，暂不处理，wxs暂时只支持wx源码形式
+    // __webpack_require__.r
+    compilation.hooks.runtimeRequirementInTree
+      .for(RuntimeGlobals.makeNamespaceObject)
+      .tap({
+        name: 'WxsTemplatePlugin',
+        stage: -1000
+      }, chunk => {
+        compilation.addRuntimeModule(
+          chunk,
+          new MakeNamespaceObjectRuntimeModule()
+        )
+        return true
+      })
+
+    // __webpack_require__.n
+    compilation.hooks.runtimeRequirementInTree
+      .for(RuntimeGlobals.compatGetDefaultExport)
+      .tap({
+        name: 'WxsTemplatePlugin',
+        stage: -1000
+      }, chunk => {
+        compilation.addRuntimeModule(
+          chunk,
+          new CompatGetDefaultExportRuntimeModule()
+        )
+        return true
+      })
+
     // mainTemplate.hooks.requireExtensions.tap(
     //   'WxsMainTemplatePlugin',
     //   () => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mpxjs/webpack-plugin",
-  "version": "2.7.44",
+  "version": "2.7.47",
   "description": "mpx compile core",
   "keywords": [
     "mpx"
@@ -80,5 +80,5 @@
   "engines": {
     "node": ">=14.14.0"
   },
-  "gitHead": "306aee23bc55c7f1af58b8de0c6e6394370c88d4"
+  "gitHead": "05354d5750021d76f4bf0ae2a4ab73fb2f8ef83b"
 }