plugin-webpack5.js 6.1 KB

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