plugin-webpack4.js 6.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219
  1. const qs = require('querystring')
  2. const RuleSet = require('webpack/lib/RuleSet')
  3. const { resolveCompiler } = require('./compiler')
  4. const id = 'vue-loader-plugin'
  5. const NS = 'vue-loader'
  6. class VueLoaderPlugin {
  7. apply(compiler) {
  8. // add NS marker so that the loader can detect and report missing plugin
  9. if (compiler.hooks) {
  10. // webpack 4
  11. compiler.hooks.compilation.tap(id, (compilation) => {
  12. const normalModuleLoader = compilation.hooks.normalModuleLoader
  13. normalModuleLoader.tap(id, (loaderContext) => {
  14. loaderContext[NS] = true
  15. })
  16. })
  17. } else {
  18. // webpack < 4
  19. compiler.plugin('compilation', (compilation) => {
  20. compilation.plugin('normal-module-loader', (loaderContext) => {
  21. loaderContext[NS] = true
  22. })
  23. })
  24. }
  25. // use webpack's RuleSet utility to normalize user rules
  26. const rawRules = compiler.options.module.rules
  27. const { rules } = new RuleSet(rawRules)
  28. // find the rule that applies to vue files
  29. let vueRuleIndex = rawRules.findIndex(createMatcher(`foo.vue`))
  30. if (vueRuleIndex < 0) {
  31. vueRuleIndex = rawRules.findIndex(createMatcher(`foo.vue.html`))
  32. }
  33. const vueRule = rules[vueRuleIndex]
  34. if (!vueRule) {
  35. throw new Error(
  36. `[VueLoaderPlugin Error] No matching rule for .vue files found.\n` +
  37. `Make sure there is at least one root-level rule that matches .vue or .vue.html files.`
  38. )
  39. }
  40. if (vueRule.oneOf) {
  41. throw new Error(
  42. `[VueLoaderPlugin Error] vue-loader 15 currently does not support vue rules with oneOf.`
  43. )
  44. }
  45. // get the normalized "use" for vue files
  46. const vueUse = vueRule.use
  47. // get vue-loader options
  48. const vueLoaderUseIndex = vueUse.findIndex((u) => {
  49. return /^vue-loader|(\/|\\|@)vue-loader/.test(u.loader)
  50. })
  51. if (vueLoaderUseIndex < 0) {
  52. throw new Error(
  53. `[VueLoaderPlugin Error] No matching use for vue-loader is found.\n` +
  54. `Make sure the rule matching .vue files include vue-loader in its use.`
  55. )
  56. }
  57. // make sure vue-loader options has a known ident so that we can share
  58. // options by reference in the template-loader by using a ref query like
  59. // template-loader??vue-loader-options
  60. const vueLoaderUse = vueUse[vueLoaderUseIndex]
  61. vueLoaderUse.ident = 'vue-loader-options'
  62. vueLoaderUse.options = vueLoaderUse.options || {}
  63. // for each user rule (except the vue rule), create a cloned rule
  64. // that targets the corresponding language blocks in *.vue files.
  65. const clonedRules = rules.filter((r) => r !== vueRule).map(cloneRule)
  66. // rule for template compiler
  67. const templateCompilerRule = {
  68. loader: require.resolve('./loaders/templateLoader'),
  69. resourceQuery: (query) => {
  70. const parsed = qs.parse(query.slice(1))
  71. return parsed.vue != null && parsed.type === 'template'
  72. },
  73. options: vueLoaderUse.options
  74. }
  75. // for each rule that matches plain .js/.ts files, also create a clone and
  76. // match it against the compiled template code inside *.vue files, so that
  77. // compiled vue render functions receive the same treatment as user code
  78. // (mostly babel)
  79. const { is27 } = resolveCompiler(compiler.options.context)
  80. let jsRulesForRenderFn = []
  81. if (is27) {
  82. const matchesJS = createMatcher(`test.js`)
  83. // const matchesTS = createMatcher(`test.ts`)
  84. jsRulesForRenderFn = rules
  85. .filter((r) => r !== vueRule && matchesJS(r))
  86. .map(cloneRuleForRenderFn)
  87. }
  88. // global pitcher (responsible for injecting template compiler loader & CSS
  89. // post loader)
  90. const pitcher = {
  91. loader: require.resolve('./loaders/pitcher'),
  92. resourceQuery: (query) => {
  93. const parsed = qs.parse(query.slice(1))
  94. return parsed.vue != null
  95. },
  96. options: {
  97. cacheDirectory: vueLoaderUse.options.cacheDirectory,
  98. cacheIdentifier: vueLoaderUse.options.cacheIdentifier
  99. }
  100. }
  101. // replace original rules
  102. compiler.options.module.rules = [
  103. pitcher,
  104. ...jsRulesForRenderFn,
  105. ...(is27 ? [templateCompilerRule] : []),
  106. ...clonedRules,
  107. ...rules
  108. ]
  109. }
  110. }
  111. function createMatcher(fakeFile) {
  112. return (rule, i) => {
  113. // #1201 we need to skip the `include` check when locating the vue rule
  114. const clone = Object.assign({}, rule)
  115. delete clone.include
  116. const normalized = RuleSet.normalizeRule(clone, {}, '')
  117. return !rule.enforce && normalized.resource && normalized.resource(fakeFile)
  118. }
  119. }
  120. function cloneRule(rule) {
  121. const { resource, resourceQuery } = rule
  122. // Assuming `test` and `resourceQuery` tests are executed in series and
  123. // synchronously (which is true based on RuleSet's implementation), we can
  124. // save the current resource being matched from `test` so that we can access
  125. // it in `resourceQuery`. This ensures when we use the normalized rule's
  126. // resource check, include/exclude are matched correctly.
  127. let currentResource
  128. const res = Object.assign({}, rule, {
  129. resource: {
  130. test: (resource) => {
  131. currentResource = resource
  132. return true
  133. }
  134. },
  135. resourceQuery: (query) => {
  136. const parsed = qs.parse(query.slice(1))
  137. if (parsed.vue == null) {
  138. return false
  139. }
  140. if (resource && parsed.lang == null) {
  141. return false
  142. }
  143. const fakeResourcePath = `${currentResource}.${parsed.lang}`
  144. if (resource && !resource(fakeResourcePath)) {
  145. return false
  146. }
  147. if (resourceQuery && !resourceQuery(query)) {
  148. return false
  149. }
  150. return true
  151. }
  152. })
  153. if (rule.rules) {
  154. res.rules = rule.rules.map(cloneRule)
  155. }
  156. if (rule.oneOf) {
  157. res.oneOf = rule.oneOf.map(cloneRule)
  158. }
  159. return res
  160. }
  161. function cloneRuleForRenderFn(rule) {
  162. const resource = rule.resource
  163. const resourceQuery = rule.resourceQuery
  164. let currentResource
  165. const res = {
  166. ...rule,
  167. resource: (resource) => {
  168. currentResource = resource
  169. return true
  170. },
  171. resourceQuery: (query) => {
  172. const parsed = qs.parse(query.slice(1))
  173. if (parsed.vue == null || parsed.type !== 'template') {
  174. return false
  175. }
  176. const fakeResourcePath = `${currentResource}.${parsed.ts ? `ts` : `js`}`
  177. if (resource && !resource(fakeResourcePath)) {
  178. return false
  179. }
  180. if (resourceQuery && !resourceQuery(query)) {
  181. return false
  182. }
  183. return true
  184. }
  185. }
  186. if (rule.rules) {
  187. res.rules = rule.rules.map(cloneRuleForRenderFn)
  188. }
  189. if (rule.oneOf) {
  190. res.oneOf = rule.oneOf.map(cloneRuleForRenderFn)
  191. }
  192. return res
  193. }
  194. VueLoaderPlugin.NS = NS
  195. module.exports = VueLoaderPlugin