plugin-webpack5.js 6.6 KB

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