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

package/lib/web/processTemplate.js

@@ -1,8 +1,9 @@
 const templateCompiler = require('../template-compiler/compiler')
 const genComponentTag = require('../utils/gen-component-tag')
 const addQuery = require('../utils/add-query')
+const path = require('path')
 const parseRequest = require('../utils/parse-request')
-// const { matchCondition } = require('../utils/match-condition')
+const getMainCompilation = require('../utils/get-main-compilation')
 
 function calculateRootEleChild (arr) {
   if (!arr) {
@@ -20,30 +21,19 @@ function calculateRootEleChild (arr) {
   }, 0)
 }
 
-module.exports = function (template, {
-  loaderContext,
-  // hasScoped,
-  hasComment,
-  isNative,
-  srcMode,
-  moduleId,
-  ctorType,
-  usingComponents,
-  componentGenerics
-}, callback) {
-  const mpx = loaderContext.getMpx()
-  const {
-    mode,
-    defs,
-    wxsContentMap,
-    decodeHTMLText,
-    externalClasses,
-    checkUsingComponents
-    // autoVirtualHostRules
-  } = mpx
-  const { resourcePath } = parseRequest(loaderContext.resource)
+module.exports = function (template, options, callback) {
+  const mode = options.mode
+  const srcMode = options.srcMode
+  const defs = options.defs
+  const moduleId = options.moduleId
+  const loaderContext = options.loaderContext
+  const ctorType = options.ctorType
+  const resourcePath = parseRequest(loaderContext.resource).resourcePath
   const builtInComponentsMap = {}
-
+  const compilation = loaderContext._compilation
+  const mainCompilation = getMainCompilation(compilation)
+  const mpx = mainCompilation.__mpx__
+  const wxsContentMap = mpx.wxsContentMap
   let wxsModuleMap, genericsInfo
   let output = '/* template */\n'
 
@@ -53,7 +43,7 @@ module.exports = function (template, {
       content: '<div class="app"><mpx-keep-alive><router-view class="page"></router-view></mpx-keep-alive></div>'
     }
     builtInComponentsMap['mpx-keep-alive'] = {
-      resource: addQuery('@mpxjs/webpack-plugin/lib/runtime/components/web/mpx-keep-alive.vue', { isComponent: true })
+      resource: addQuery('@mpxjs/webpack-plugin/lib/runtime/components/web/mpx-keep-alive.vue', { component: true })
     }
   }
 
@@ -72,7 +62,7 @@ module.exports = function (template, {
       }
       if (template.content) {
         const templateSrcMode = template.mode || srcMode
-        const { root, meta } = templateCompiler.parse(template.content, {
+        const parsed = templateCompiler.parse(template.content, {
           warn: (msg) => {
             loaderContext.emitWarning(
               new Error('[template compiler][' + loaderContext.resource + ']: ' + msg)
@@ -83,59 +73,52 @@ module.exports = function (template, {
               new Error('[template compiler][' + loaderContext.resource + ']: ' + msg)
             )
           },
-          usingComponents,
-          hasComment,
-          isNative,
+          usingComponents: options.usingComponents,
+          hasComment: options.hasComment,
+          isNative: options.isNative,
+          basename: path.basename(resourcePath),
           isComponent: ctorType === 'component',
           mode,
           srcMode: templateSrcMode,
           defs,
-          decodeHTMLText,
-          externalClasses,
-          // todo 后续输出web也采用mpx的scoped处理
+          decodeHTMLText: options.decodeHTMLText,
+          externalClasses: options.externalClasses,
           hasScoped: false,
           moduleId,
-          filePath: resourcePath,
+          filePath: loaderContext.resourcePath,
           i18n: null,
-          checkUsingComponents,
+          checkUsingComponents: options.checkUsingComponents,
           // web模式下全局组件不会被合入usingComponents中，故globalComponents可以传空
           globalComponents: [],
           // web模式下实现抽象组件
-          componentGenerics
-          // todo 后续输出web也基于autoVirtualHostRules决定是否添加root wrapper
-          // hasVirtualHost: matchCondition(resourcePath, autoVirtualHostRules)
+          componentGenerics: options.componentGenerics
         })
-        if (meta.wxsModuleMap) {
-          wxsModuleMap = meta.wxsModuleMap
+        if (parsed.meta.wxsModuleMap) {
+          wxsModuleMap = parsed.meta.wxsModuleMap
         }
-        if (meta.wxsContentMap) {
-          for (let module in meta.wxsContentMap) {
-            wxsContentMap[`${resourcePath}~${module}`] = meta.wxsContentMap[module]
+        if (parsed.meta.wxsContentMap) {
+          for (let module in parsed.meta.wxsContentMap) {
+            wxsContentMap[`${resourcePath}~${module}`] = parsed.meta.wxsContentMap[module]
           }
         }
-        if (meta.builtInComponentsMap) {
-          Object.keys(meta.builtInComponentsMap).forEach((name) => {
+        if (parsed.meta.builtInComponentsMap) {
+          Object.keys(parsed.meta.builtInComponentsMap).forEach((name) => {
             builtInComponentsMap[name] = {
-              resource: addQuery(meta.builtInComponentsMap[name], { isComponent: true })
+              resource: addQuery(parsed.meta.builtInComponentsMap[name], { component: true })
             }
           })
         }
-        if (meta.genericsInfo) {
-          genericsInfo = meta.genericsInfo
+        if (parsed.meta.genericsInfo) {
+          genericsInfo = parsed.meta.genericsInfo
         }
-        // 输出H5有多个root element时, 使用mpx-root-view标签包裹
-        // todo 后续输出web也基于autoVirtualHostRules决定是否添加root wrapper
-        if (root.tag === 'temp-node') {
-          const childLen = calculateRootEleChild(root.children)
+        // 输出H5有多个root element时, 使用div标签包裹
+        if (parsed.root.tag === 'temp-node') {
+          const childLen = calculateRootEleChild(parsed.root.children)
           if (childLen >= 2) {
-            root.tag = 'div'
-            templateCompiler.addAttrs(root, [{
-              name: 'class',
-              value: 'mpx-root-view'
-            }])
+            parsed.root.tag = 'div'
           }
         }
-        return templateCompiler.serialize(root)
+        return templateCompiler.serialize(parsed.root)
       }
     })
     output += '\n\n'

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

@@ -1,9 +1,12 @@
+// const htmlMinifier = require('html-minifier')
 const attrParse = require('./attributesParser')
 const loaderUtils = require('loader-utils')
 const url = require('url')
 const config = require('../config')
+const getMainCompilation = require('../utils/get-main-compilation')
 const createHelpers = require('../helpers')
 const isUrlRequest = require('../utils/is-url-request')
+const addQuery = require('../utils/add-query')
 const parseRequest = require('../utils/parse-request')
 
 function randomIdent () {
@@ -11,21 +14,39 @@ function randomIdent () {
 }
 
 module.exports = function (content) {
+  const loaderContext = this
+  const isProduction = this.minimize || process.env.NODE_ENV === 'production'
   const options = loaderUtils.getOptions(this) || {}
-  const mpx = this.getMpx()
-  const root = mpx.projectRoot
-  const externals = mpx.externals
+  const mpx = getMainCompilation(this._compilation).__mpx__
 
-  const { queryObj } = parseRequest(this.resource)
+  const { resourcePath: filePath, queryObj } = parseRequest(this.resource)
+  const moduleId = 'm' + mpx.pathHash(filePath)
   const hasScoped = false
   const hasComment = false
   const isNative = true
 
+  const usingComponents = []
+
   const mode = mpx.mode
+  const globalSrcMode = mpx.srcMode
   const localSrcMode = queryObj.mode
+  const srcMode = localSrcMode || globalSrcMode
   const customAttributes = options.attributes || mpx.attributes || []
 
-  const { getRequestString } = createHelpers(this)
+  const {
+    getSrcRequestString
+  } = createHelpers({
+    loaderContext,
+    options,
+    moduleId,
+    isProduction,
+    hasScoped,
+    hasComment,
+    usingComponents,
+    srcMode,
+    isNative,
+    projectRoot: options.root || ''
+  })
 
   const attributes = ['image:src', 'audio:src', 'video:src', 'cover-image:src', 'import:src', 'include:src', `${config[mode].wxs.tag}:${config[mode].wxs.src}`].concat(customAttributes)
 
@@ -43,7 +64,7 @@ module.exports = function (content) {
   const data = {}
   content = [content]
   links.forEach(function (link) {
-    if (!isUrlRequest(link.value, root, externals)) return
+    if (!isUrlRequest(link.value, options.root)) return
 
     if (link.value.indexOf('mailto:') > -1) return
 
@@ -67,37 +88,57 @@ module.exports = function (content) {
   })
   content.reverse()
   content = content.join('')
+
+  // if (isProduction) {
+  //   const minimizeOptions = Object.assign({}, options);
+  //   [
+  //     'removeComments',
+  //     'removeCommentsFromCDATA',
+  //     'removeCDATASectionsFromCDATA',
+  //     'caseSensitive',
+  //     'collapseWhitespace',
+  //     'conservativeCollapse',
+  //     'useShortDoctype',
+  //     'keepClosingSlash',
+  //     'removeScriptTypeAttributes',
+  //     'removeStyleTypeAttributes'
+  //   ].forEach(function (name) {
+  //     if (typeof minimizeOptions[name] === 'undefined') {
+  //       minimizeOptions[name] = true
+  //     }
+  //   })
+  //
+  //   const KEY_IGNORECUSTOM_FRAGMENTS = 'ignoreCustomFragments'
+  //   if (typeof minimizeOptions[KEY_IGNORECUSTOM_FRAGMENTS] === 'undefined') {
+  //     minimizeOptions[KEY_IGNORECUSTOM_FRAGMENTS] = [/{{[\s\S]*?}}/]
+  //   }
+  //
+  //   content = htmlMinifier.minify(content, minimizeOptions)
+  // }
+
   content = JSON.stringify(content)
 
   const exportsString = 'module.exports = '
 
-  return exportsString + content.replace(/xxxHTMLLINKxxx[0-9.]+xxx/g, (match) => {
+  return exportsString + content.replace(/xxxHTMLLINKxxx[0-9.]+xxx/g, function (match) {
     if (!data[match]) return match
 
     const link = data[match]
 
-    let src = loaderUtils.urlToRequest(link.value, root)
+    let src = loaderUtils.urlToRequest(link.value, options.root)
+    src = addQuery(src, { isStatic: true })
 
-    let requestString, extraOptions
+    let requestString
 
     switch (link.tag) {
       case 'import':
       case 'include':
-        extraOptions = {
-          hasScoped,
-          hasComment,
-          isNative,
-          isStatic: true
-        }
-        requestString = getRequestString('template', { src, mode: localSrcMode }, extraOptions)
+        requestString = getSrcRequestString('template', { src, mode: localSrcMode }, -1)
         break
       case config[mode].wxs.tag:
         // 显式传递issuerResource避免模块缓存以及提供给wxs-loader计算相对路径
-        extraOptions = {
-          issuerResource: this.resource,
-          isStatic: true
-        }
-        requestString = getRequestString('wxs', { src, mode: localSrcMode }, extraOptions)
+        src = addQuery(src, { issuerResource: loaderContext.resource })
+        requestString = getSrcRequestString('wxs', { src, mode: localSrcMode }, -1, undefined, '!!')
         break
       default:
         requestString = JSON.stringify(src)

package/lib/wxs/WxsParserPlugin.js

@@ -3,11 +3,11 @@ class WxsParserPlugin {
     this.options = options
   }
 
-  apply (parser) {
+  apply (parser, compilation) {
     parser.hooks.program.tap({
       name: 'WxsParserPlugin',
       // 放在最后面执行
-      stage: 1000
+      stage: 100
     }, ast => {
       const module = parser.state.module
       if (module.buildInfo) {

package/lib/wxs/WxsPlugin.js

@@ -1,6 +1,5 @@
 const WxsTemplatePlugin = require('./WxsTemplatePlugin')
 const WxsParserPlugin = require('./WxsParserPlugin')
-const WxsModuleIdsPlugin = require('./WxsModuleIdsPlugin')
 
 class WxsPlugin {
   constructor (options = { mode: 'wx' }) {
@@ -9,15 +8,20 @@ class WxsPlugin {
 
   apply (compiler) {
     compiler.hooks.thisCompilation.tap('WxsPlugin', (compilation, { normalModuleFactory }) => {
-      new WxsTemplatePlugin(this.options).apply(compilation)
-      new WxsModuleIdsPlugin(this.options).apply(compilation)
+      new WxsTemplatePlugin(this.options).apply(
+        compilation.mainTemplate,
+        compilation
+      )
 
       compilation.hooks.buildModule.tap('WxsPlugin', (module) => {
         module.wxs = true
       })
 
       const handler = (parser) => {
-        new WxsParserPlugin(this.options).apply(parser)
+        new WxsParserPlugin(this.options).apply(
+          parser,
+          compilation
+        )
       }
 
       normalModuleFactory.hooks.parser

package/lib/wxs/WxsTemplatePlugin.js

@@ -1,58 +1,104 @@
+const Template = require('webpack/lib/Template')
 const config = require('../config')
-const { ConcatSource } = require('webpack').sources
-const JavascriptModulesPlugin = require('webpack/lib/javascript/JavascriptModulesPlugin')
+const { ConcatSource } = require('webpack-sources')
 
-module.exports = class WxsTemplatePlugin {
+module.exports = class WxsMainTemplatePlugin {
   constructor (options = { mode: 'wx' }) {
     this.options = options
   }
 
-  apply (compilation) {
-    const hooks = JavascriptModulesPlugin.getCompilationHooks(compilation)
-
-    hooks.renderStartup.tap('WxsTemplatePlugin', (source) => {
-      const postfix = 'return __webpack_exports__ && __webpack_exports__.__esModule? __webpack_exports__["default"] : __webpack_exports__;\n'
-      return new ConcatSource(source, postfix)
+  apply (mainTemplate, compilation) {
+    mainTemplate.hooks.require.tap('MainTemplate', (source, chunk, hash) => {
+      return Template.asString([
+        '// Check if module is in cache',
+        'if(installedModules[moduleId]) {',
+        Template.indent('return installedModules[moduleId].exports;'),
+        '}',
+        '// Create a new module (and put it into the cache)',
+        'var module = installedModules[moduleId] = {',
+        Template.indent(mainTemplate.hooks.moduleObj.call('', chunk, hash, 'moduleId')),
+        '};',
+        '',
+        Template.asString(
+          [
+            '// Execute the module function',
+            '// wxs连call都不支持我也是服气...',
+            `modules[moduleId](module, module.exports, ${mainTemplate.renderRequireFunctionForModule(
+              hash,
+              chunk,
+              'moduleId'
+            )});`
+          ]
+        ),
+        '',
+        '// Flag the module as loaded',
+        'module.l = true;',
+        '',
+        '// Return the exports of the module',
+        'return module.exports;'
+      ])
     })
+    mainTemplate.hooks.requireExtensions.tap(
+      'WxsMainTemplatePlugin',
+      () => {
+        return Template.asString([
+          '// define harmony function exports',
+          `${mainTemplate.requireFn}.d = function(exports, name, getter) {`,
+          Template.indent([
+            'exports[name] = getter();'
+          ]),
+          '};',
+          '',
+          '// define __esModule on exports',
+          `${mainTemplate.requireFn}.r = function(exports) {`,
+          Template.indent([
+            'exports.__esModule = true;'
+          ]),
+          '};',
+          '',
+          '// getDefaultExport function for compatibility with non-harmony modules',
+          mainTemplate.requireFn + '.n = function(module) {',
+          Template.indent([
+            'var getter = module && module.__esModule ?',
+            Template.indent([
+              'function getDefault() { return module["default"]; } :',
+              'function getModuleExports() { return module; };'
+            ]),
+            `getter.a = getter();`,
+            'return getter;'
+          ]),
+          '};'
+        ])
+      }
+    )
+    mainTemplate.hooks.renderWithEntry.tap(
+      'WxsMainTemplatePlugin',
+      (source, chunk, hash) => {
+        const prefix = config[this.options.mode].wxs.templatePrefix
+        return new ConcatSource(prefix, source)
+      }
+    )
 
-    hooks.render.tap('WxsTemplatePlugin', (source) => {
-      const prefix = config[this.options.mode].wxs.templatePrefix
-      return new ConcatSource(prefix, source)
+    mainTemplate.hooks.startup.tap('MainTemplate', (source, chunk, hash) => {
+      /** @type {string[]} */
+      const buf = []
+      if (chunk.entryModule) {
+        buf.push('// Load entry module and return exports')
+        buf.push(
+          `var entryExports = ${mainTemplate.renderRequireFunctionForModule(
+            hash,
+            chunk,
+            JSON.stringify(chunk.entryModule.id)
+          )}(${mainTemplate.requireFn}.s = ${JSON.stringify(chunk.entryModule.id)});`
+        )
+        buf.push('return entryExports && entryExports.__esModule? entryExports["default"] : entryExports;')
+      }
+      return Template.asString(buf)
     })
 
-    // todo webpack5的新的代码生成模式下完美支持.d.r.n的成本较高，暂不处理，wxs暂时只支持wx源码形式
-    // mainTemplate.hooks.requireExtensions.tap(
-    //   'WxsMainTemplatePlugin',
-    //   () => {
-    //     return Template.asString([
-    //       '// define harmony function exports',
-    //       `${mainTemplate.requireFn}.d = function(exports, name, getter) {`,
-    //       Template.indent([
-    //         'exports[name] = getter();'
-    //       ]),
-    //       '};',
-    //       '',
-    //       '// define __esModule on exports',
-    //       `${mainTemplate.requireFn}.r = function(exports) {`,
-    //       Template.indent([
-    //         'exports.__esModule = true;'
-    //       ]),
-    //       '};',
-    //       '',
-    //       '// getDefaultExport function for compatibility with non-harmony modules',
-    //       mainTemplate.requireFn + '.n = function(module) {',
-    //       Template.indent([
-    //         'var getter = module && module.__esModule ?',
-    //         Template.indent([
-    //           'function getDefault() { return module["default"]; } :',
-    //           'function getModuleExports() { return module; };'
-    //         ]),
-    //         `getter.a = getter();`,
-    //         'return getter;'
-    //       ]),
-    //       '};'
-    //     ])
-    //   }
-    // )
+    mainTemplate.hooks.hash.tap('WxsMainTemplatePlugin', hash => {
+      hash.update('wxs')
+      hash.update(this.options.mode)
+    })
   }
 }

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

@@ -1,9 +1,11 @@
 // 该loader用于将用户定义的messages注入到i18n.wxs中
+const getMainCompilation = require('../utils/get-main-compilation')
 const loaderUtils = require('loader-utils')
 
 module.exports = function (content) {
-  const i18n = this.getMpx().i18n
-  let prefix = 'var __mpx_messages__, __mpx_datetime_formats__, __mpx_number_formats__, __mpx_locale__\n'
+  const mainCompilation = getMainCompilation(this._compilation)
+  const i18n = mainCompilation.__mpx__.i18n
+  let prefix = 'var __mpx_messages__, __mpx_datetime_formats__, __mpx_number_formats__\n'
   if (i18n) {
     if (i18n.messages) {
       prefix += `__mpx_messages__ = ${JSON.stringify(i18n.messages)}\n`
@@ -20,9 +22,6 @@ module.exports = function (content) {
     } else if (i18n.numberFormatsPath) {
       prefix += `__mpx_number_formats__ = require(${loaderUtils.stringifyRequest(this, i18n.numberFormatsPath)})\n`
     }
-    if (i18n.locale) {
-      prefix += `__mpx_locale__ = ${JSON.stringify(i18n.locale)}\n`
-    }
   }
   content = prefix + content
   return content

package/lib/wxs/wxs-loader.js

@@ -0,0 +1,117 @@
+const NodeTargetPlugin = require('webpack/lib/node/NodeTargetPlugin')
+const SingleEntryPlugin = require('webpack/lib/SingleEntryPlugin')
+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 parseRequest = require('../utils/parse-request')
+const toPosix = require('../utils/to-posix')
+const fixRelative = require('../utils/fix-relative')
+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 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 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 issuerDir = path.dirname(issuerName)
+
+  const getName = (raw) => {
+    const match = /^(.*?)(\.[^.]*)?$/.exec(raw)
+    return match[1]
+  }
+
+  const wxsModule = queryObj.wxsModule
+  if (wxsModule) {
+    resourcePath = `${resourcePath}~${wxsModule}`
+  }
+  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 callback = (err) => {
+    if (err) return nativeCallback(err)
+    let relativePath = toPosix(path.relative(issuerDir, filename))
+    relativePath = fixRelative(relativePath, mode)
+    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
+  }
+  // wxs文件必须经过pre-loader
+  const request = `!${this.remainingRequest}`
+  const plugins = [
+    new WxsPlugin({ mode }),
+    new NodeTargetPlugin(),
+    new SingleEntryPlugin(this.context, request, getName(filename)),
+    new LimitChunkCountPlugin({ maxChunks: 1 })
+  ]
+
+  const childCompiler = mainCompilation.createChildCompiler(request, 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.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()
+  })
+
+  childCompiler.runAsChild((err, entries, compilation) => {
+    if (err) return callback(err)
+    if (compilation.errors.length > 0) {
+      return callback(compilation.errors[0])
+    }
+
+    compilation.fileDependencies.forEach((dep) => {
+      this.addDependency(dep)
+    }, this)
+    compilation.contextDependencies.forEach((dep) => {
+      this.addContextDependency(dep)
+    }, this)
+    callback()
+  })
+}