pluginWebpack4.js 10 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237
  1. "use strict";
  2. var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
  3. if (k2 === undefined) k2 = k;
  4. Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
  5. }) : (function(o, m, k, k2) {
  6. if (k2 === undefined) k2 = k;
  7. o[k2] = m[k];
  8. }));
  9. var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
  10. Object.defineProperty(o, "default", { enumerable: true, value: v });
  11. }) : function(o, v) {
  12. o["default"] = v;
  13. });
  14. var __importStar = (this && this.__importStar) || function (mod) {
  15. if (mod && mod.__esModule) return mod;
  16. var result = {};
  17. if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
  18. __setModuleDefault(result, mod);
  19. return result;
  20. };
  21. Object.defineProperty(exports, "__esModule", { value: true });
  22. const qs = __importStar(require("querystring"));
  23. const resolveScript_1 = require("./resolveScript");
  24. const fs = require("fs");
  25. const compiler_1 = require("./compiler");
  26. const descriptorCache_1 = require("./descriptorCache");
  27. const util_1 = require("./util");
  28. const RuleSet = require('webpack/lib/RuleSet');
  29. const id = 'vue-loader-plugin';
  30. const NS = 'vue-loader';
  31. class VueLoaderPlugin {
  32. apply(compiler) {
  33. // inject NS for plugin installation check in the main loader
  34. compiler.hooks.compilation.tap(id, (compilation) => {
  35. compilation.hooks.normalModuleLoader.tap(id, (loaderContext) => {
  36. loaderContext[NS] = true;
  37. });
  38. });
  39. const rawRules = compiler.options.module.rules;
  40. // use webpack's RuleSet utility to normalize user rules
  41. const rules = new RuleSet(rawRules).rules;
  42. // find the rule that applies to vue files
  43. let vueRuleIndex = rawRules.findIndex(createMatcher(`foo.vue`));
  44. if (vueRuleIndex < 0) {
  45. vueRuleIndex = rawRules.findIndex(createMatcher(`foo.vue.html`));
  46. }
  47. const vueRule = rules[vueRuleIndex];
  48. if (!vueRule) {
  49. throw new Error(`[VueLoaderPlugin Error] No matching rule for .vue files found.\n` +
  50. `Make sure there is at least one root-level rule that matches .vue or .vue.html files.`);
  51. }
  52. if (vueRule.oneOf) {
  53. throw new Error(`[VueLoaderPlugin Error] vue-loader currently does not support vue rules with oneOf.`);
  54. }
  55. // get the normlized "use" for vue files
  56. const vueUse = vueRule.use;
  57. // get vue-loader options
  58. const vueLoaderUseIndex = vueUse.findIndex((u) => {
  59. // FIXME: this code logic is incorrect when project paths starts with `vue-loader-something`
  60. return /^vue-loader|(\/|\\|@)vue-loader/.test(u.loader || '');
  61. });
  62. if (vueLoaderUseIndex < 0) {
  63. throw new Error(`[VueLoaderPlugin Error] No matching use for vue-loader is found.\n` +
  64. `Make sure the rule matching .vue files include vue-loader in its use.`);
  65. }
  66. const vueLoaderUse = vueUse[vueLoaderUseIndex];
  67. const vueLoaderOptions = (vueLoaderUse.options =
  68. vueLoaderUse.options || {});
  69. // for each user rule (except the vue rule), create a cloned rule
  70. // that targets the corresponding language blocks in *.vue files.
  71. const clonedRules = rules.filter((r) => r !== vueRule).map(cloneRule);
  72. // rule for template compiler
  73. const templateCompilerRule = {
  74. loader: require.resolve('./templateLoader'),
  75. resourceQuery: (query) => {
  76. const parsed = qs.parse(query.slice(1));
  77. return parsed.vue != null && parsed.type === 'template';
  78. },
  79. options: Object.assign({ ident: vueLoaderUse.ident }, vueLoaderOptions),
  80. };
  81. // for each rule that matches plain .js/.ts files, also create a clone and
  82. // match it against the compiled template code inside *.vue files, so that
  83. // compiled vue render functions receive the same treatment as user code
  84. // (mostly babel)
  85. const matchesJS = createMatcher(`test.js`);
  86. const matchesTS = createMatcher(`test.ts`);
  87. const jsRulesForRenderFn = rules
  88. .filter((r) => r !== vueRule && (matchesJS(r) || matchesTS(r)))
  89. .map(cloneRuleForRenderFn);
  90. // pitcher for block requests (for injecting stylePostLoader and deduping
  91. // loaders matched for src imports)
  92. const pitcher = {
  93. loader: require.resolve('./pitcher'),
  94. resourceQuery: (query) => {
  95. const parsed = qs.parse(query.slice(1));
  96. return parsed.vue != null;
  97. },
  98. };
  99. // replace original rules
  100. compiler.options.module.rules = [
  101. pitcher,
  102. ...jsRulesForRenderFn,
  103. templateCompilerRule,
  104. ...clonedRules,
  105. ...rules,
  106. ];
  107. // 3.3 HMR support for imported types
  108. if ((0, util_1.needHMR)(vueLoaderOptions, compiler.options) &&
  109. compiler_1.compiler.invalidateTypeCache) {
  110. let watcher;
  111. const WatchPack = require('watchpack');
  112. compiler.hooks.afterCompile.tap(id, (compilation) => {
  113. if (compilation.compiler === compiler) {
  114. // type-only imports can be tree-shaken and not registered as a
  115. // watched file at all, so we have to manually ensure they are watched.
  116. const files = [...resolveScript_1.typeDepToSFCMap.keys()];
  117. const oldWatcher = watcher;
  118. watcher = new WatchPack({ aggregateTimeout: 0 });
  119. watcher.once('aggregated', (changes, removals) => {
  120. for (const file of changes) {
  121. // bust compiler-sfc type dep cache
  122. compiler_1.compiler.invalidateTypeCache(file);
  123. const affectedSFCs = resolveScript_1.typeDepToSFCMap.get(file);
  124. if (affectedSFCs) {
  125. for (const sfc of affectedSFCs) {
  126. // bust script resolve cache
  127. const desc = descriptorCache_1.descriptorCache.get(sfc);
  128. if (desc)
  129. resolveScript_1.clientCache.delete(desc);
  130. // force update importing SFC
  131. fs.writeFileSync(sfc, fs.readFileSync(sfc, 'utf-8'));
  132. }
  133. }
  134. }
  135. for (const file of removals) {
  136. compiler_1.compiler.invalidateTypeCache(file);
  137. }
  138. });
  139. watcher.watch({ files, startTime: Date.now() });
  140. if (oldWatcher) {
  141. oldWatcher.close();
  142. }
  143. }
  144. });
  145. compiler.hooks.watchClose.tap(id, () => {
  146. if (watcher) {
  147. watcher.close();
  148. }
  149. });
  150. // In some cases, e.g. in this project's tests,
  151. // even though needsHMR() returns true, webpack is not watching, thus no watchClose hook is called.
  152. // So we need to close the watcher when webpack is done.
  153. compiler.hooks.done.tap(id, () => {
  154. if (watcher) {
  155. watcher.close();
  156. }
  157. });
  158. }
  159. }
  160. }
  161. VueLoaderPlugin.NS = NS;
  162. function createMatcher(fakeFile) {
  163. return (rule) => {
  164. // #1201 we need to skip the `include` check when locating the vue rule
  165. const clone = Object.assign({}, rule);
  166. delete clone.include;
  167. const normalized = RuleSet.normalizeRule(clone, {}, '');
  168. return !rule.enforce && normalized.resource && normalized.resource(fakeFile);
  169. };
  170. }
  171. function cloneRule(rule) {
  172. const resource = rule.resource;
  173. const resourceQuery = rule.resourceQuery;
  174. // Assuming `test` and `resourceQuery` tests are executed in series and
  175. // synchronously (which is true based on RuleSet's implementation), we can
  176. // save the current resource being matched from `test` so that we can access
  177. // it in `resourceQuery`. This ensures when we use the normalized rule's
  178. // resource check, include/exclude are matched correctly.
  179. let currentResource;
  180. const res = Object.assign(Object.assign({}, rule), { resource: (resource) => {
  181. currentResource = resource;
  182. return true;
  183. }, resourceQuery: (query) => {
  184. const parsed = qs.parse(query.slice(1));
  185. if (parsed.vue == null) {
  186. return false;
  187. }
  188. if (resource && parsed.lang == null) {
  189. return false;
  190. }
  191. const fakeResourcePath = `${currentResource}.${parsed.lang}`;
  192. if (resource && !resource(fakeResourcePath)) {
  193. return false;
  194. }
  195. if (resourceQuery && !resourceQuery(query)) {
  196. return false;
  197. }
  198. return true;
  199. } });
  200. if (rule.rules) {
  201. res.rules = rule.rules.map(cloneRule);
  202. }
  203. if (rule.oneOf) {
  204. res.oneOf = rule.oneOf.map(cloneRule);
  205. }
  206. return res;
  207. }
  208. function cloneRuleForRenderFn(rule) {
  209. const resource = rule.resource;
  210. const resourceQuery = rule.resourceQuery;
  211. let currentResource;
  212. const res = Object.assign(Object.assign({}, rule), { resource: (resource) => {
  213. currentResource = resource;
  214. return true;
  215. }, resourceQuery: (query) => {
  216. const parsed = qs.parse(query.slice(1));
  217. if (parsed.vue == null || parsed.type !== 'template') {
  218. return false;
  219. }
  220. const fakeResourcePath = `${currentResource}.${parsed.ts ? `ts` : `js`}`;
  221. if (resource && !resource(fakeResourcePath)) {
  222. return false;
  223. }
  224. if (resourceQuery && !resourceQuery(query)) {
  225. return false;
  226. }
  227. return true;
  228. } });
  229. if (rule.rules) {
  230. res.rules = rule.rules.map(cloneRuleForRenderFn);
  231. }
  232. if (rule.oneOf) {
  233. res.oneOf = rule.oneOf.map(cloneRuleForRenderFn);
  234. }
  235. return res;
  236. }
  237. exports.default = VueLoaderPlugin;