pluginWebpack4.js 6.6 KB

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