plugin-webpack5.js 6.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210
  1. const qs = require('querystring')
  2. const id = 'vue-loader-plugin'
  3. const NS = 'vue-loader'
  4. const BasicEffectRulePlugin = require('webpack/lib/rules/BasicEffectRulePlugin')
  5. const BasicMatcherRulePlugin = require('webpack/lib/rules/BasicMatcherRulePlugin')
  6. const DescriptionDataMatcherRulePlugin = require('webpack/lib/rules/DescriptionDataMatcherRulePlugin')
  7. const RuleSetCompiler = require('webpack/lib/rules/RuleSetCompiler')
  8. const UseEffectRulePlugin = require('webpack/lib/rules/UseEffectRulePlugin')
  9. const ruleSetCompiler = new RuleSetCompiler([
  10. new BasicMatcherRulePlugin('test', 'resource'),
  11. new BasicMatcherRulePlugin('mimetype'),
  12. new BasicMatcherRulePlugin('dependency'),
  13. new BasicMatcherRulePlugin('include', 'resource'),
  14. new BasicMatcherRulePlugin('exclude', 'resource', true),
  15. new BasicMatcherRulePlugin('conditions'),
  16. new BasicMatcherRulePlugin('resource'),
  17. new BasicMatcherRulePlugin('resourceQuery'),
  18. new BasicMatcherRulePlugin('resourceFragment'),
  19. new BasicMatcherRulePlugin('realResource'),
  20. new BasicMatcherRulePlugin('issuer'),
  21. new BasicMatcherRulePlugin('compiler'),
  22. new DescriptionDataMatcherRulePlugin(),
  23. new BasicEffectRulePlugin('type'),
  24. new BasicEffectRulePlugin('sideEffects'),
  25. new BasicEffectRulePlugin('parser'),
  26. new BasicEffectRulePlugin('resolve'),
  27. new BasicEffectRulePlugin('generator'),
  28. new UseEffectRulePlugin()
  29. ])
  30. class VueLoaderPlugin {
  31. apply (compiler) {
  32. // add NS marker so that the loader can detect and report missing plugin
  33. compiler.hooks.compilation.tap(id, compilation => {
  34. const normalModuleLoader = require('webpack/lib/NormalModule').getCompilationHooks(compilation).loader
  35. normalModuleLoader.tap(id, loaderContext => {
  36. loaderContext[NS] = true
  37. })
  38. })
  39. const rules = compiler.options.module.rules
  40. let rawVueRules
  41. let vueRules = []
  42. for (const rawRule of rules) {
  43. // skip rules with 'enforce'. eg. rule for eslint-loader
  44. if (rawRule.enforce) {
  45. continue
  46. }
  47. // skip the `include` check when locating the vue rule
  48. const clonedRawRule = Object.assign({}, rawRule)
  49. delete clonedRawRule.include
  50. const ruleSet = ruleSetCompiler.compile([{
  51. rules: [clonedRawRule]
  52. }])
  53. vueRules = ruleSet.exec({
  54. resource: 'foo.vue'
  55. })
  56. if (!vueRules.length) {
  57. vueRules = ruleSet.exec({
  58. resource: 'foo.vue.html'
  59. })
  60. }
  61. if (vueRules.length > 0) {
  62. if (rawRule.oneOf) {
  63. throw new Error(
  64. `[VueLoaderPlugin Error] vue-loader 15 currently does not support vue rules with oneOf.`
  65. )
  66. }
  67. rawVueRules = rawRule
  68. break
  69. }
  70. }
  71. if (!vueRules.length) {
  72. throw new Error(
  73. `[VueLoaderPlugin Error] No matching rule for .vue files found.\n` +
  74. `Make sure there is at least one root-level rule that matches .vue or .vue.html files.`
  75. )
  76. }
  77. // get the normlized "use" for vue files
  78. const vueUse = vueRules.filter(rule => rule.type === 'use').map(rule => rule.value)
  79. // get vue-loader options
  80. const vueLoaderUseIndex = vueUse.findIndex(u => {
  81. return /^vue-loader|(\/|\\|@)vue-loader/.test(u.loader)
  82. })
  83. if (vueLoaderUseIndex < 0) {
  84. throw new Error(
  85. `[VueLoaderPlugin Error] No matching use for vue-loader is found.\n` +
  86. `Make sure the rule matching .vue files include vue-loader in its use.`
  87. )
  88. }
  89. // make sure vue-loader options has a known ident so that we can share
  90. // options by reference in the template-loader by using a ref query like
  91. // template-loader??vue-loader-options
  92. const vueLoaderUse = vueUse[vueLoaderUseIndex]
  93. vueLoaderUse.ident = 'vue-loader-options'
  94. vueLoaderUse.options = vueLoaderUse.options || {}
  95. // for each user rule (expect the vue rule), create a cloned rule
  96. // that targets the corresponding language blocks in *.vue files.
  97. const refs = new Map()
  98. const clonedRules = rules
  99. .filter(r => r !== rawVueRules)
  100. .map((rawRule) => cloneRule(rawRule, refs))
  101. // fix conflict with config.loader and config.options when using config.use
  102. delete rawVueRules.loader
  103. delete rawVueRules.options
  104. rawVueRules.use = vueUse
  105. // global pitcher (responsible for injecting template compiler loader & CSS
  106. // post loader)
  107. const pitcher = {
  108. loader: require.resolve('./loaders/pitcher'),
  109. resourceQuery: query => {
  110. if (!query) { return false }
  111. const parsed = qs.parse(query.slice(1))
  112. return parsed.vue != null
  113. },
  114. options: {
  115. cacheDirectory: vueLoaderUse.options.cacheDirectory,
  116. cacheIdentifier: vueLoaderUse.options.cacheIdentifier
  117. }
  118. }
  119. // replace original rules
  120. compiler.options.module.rules = [
  121. pitcher,
  122. ...clonedRules,
  123. ...rules
  124. ]
  125. }
  126. }
  127. let uid = 0
  128. function cloneRule (rawRule, refs) {
  129. const rules = ruleSetCompiler.compileRules(`clonedRuleSet-${++uid}`, [{
  130. rules: [rawRule]
  131. }], refs)
  132. let currentResource
  133. const conditions = rules[0].rules
  134. .map(rule => rule.conditions)
  135. // shallow flat
  136. .reduce((prev, next) => prev.concat(next), [])
  137. // do not process rule with enforce
  138. if (!rawRule.enforce) {
  139. const ruleUse = rules[0].rules
  140. .map(rule => rule.effects
  141. .filter(effect => effect.type === 'use')
  142. .map(effect => effect.value)
  143. )
  144. // shallow flat
  145. .reduce((prev, next) => prev.concat(next), [])
  146. // fix conflict with config.loader and config.options when using config.use
  147. delete rawRule.loader
  148. delete rawRule.options
  149. rawRule.use = ruleUse
  150. }
  151. const res = Object.assign({}, rawRule, {
  152. resource: resources => {
  153. currentResource = resources
  154. return true
  155. },
  156. resourceQuery: query => {
  157. if (!query) { return false }
  158. const parsed = qs.parse(query.slice(1))
  159. if (parsed.vue == null) {
  160. return false
  161. }
  162. if (!conditions) {
  163. return false
  164. }
  165. const fakeResourcePath = `${currentResource}.${parsed.lang}`
  166. for (const condition of conditions) {
  167. // add support for resourceQuery
  168. const request = condition.property === 'resourceQuery' ? query : fakeResourcePath
  169. if (condition && !condition.fn(request)) {
  170. return false
  171. }
  172. }
  173. return true
  174. }
  175. })
  176. delete res.test
  177. if (rawRule.rules) {
  178. res.rules = rawRule.rules.map(rule => cloneRule(rule, refs))
  179. }
  180. if (rawRule.oneOf) {
  181. res.oneOf = rawRule.oneOf.map(rule => cloneRule(rule, refs))
  182. }
  183. return res
  184. }
  185. VueLoaderPlugin.NS = NS
  186. module.exports = VueLoaderPlugin