123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237 |
- "use strict";
- var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
- if (k2 === undefined) k2 = k;
- Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
- }) : (function(o, m, k, k2) {
- if (k2 === undefined) k2 = k;
- o[k2] = m[k];
- }));
- var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
- Object.defineProperty(o, "default", { enumerable: true, value: v });
- }) : function(o, v) {
- o["default"] = v;
- });
- var __importStar = (this && this.__importStar) || function (mod) {
- if (mod && mod.__esModule) return mod;
- var result = {};
- if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
- __setModuleDefault(result, mod);
- return result;
- };
- Object.defineProperty(exports, "__esModule", { value: true });
- const qs = __importStar(require("querystring"));
- const resolveScript_1 = require("./resolveScript");
- const fs = require("fs");
- const compiler_1 = require("./compiler");
- const descriptorCache_1 = require("./descriptorCache");
- const util_1 = require("./util");
- const RuleSet = require('webpack/lib/RuleSet');
- const id = 'vue-loader-plugin';
- const NS = 'vue-loader';
- class VueLoaderPlugin {
- apply(compiler) {
- // inject NS for plugin installation check in the main loader
- compiler.hooks.compilation.tap(id, (compilation) => {
- compilation.hooks.normalModuleLoader.tap(id, (loaderContext) => {
- loaderContext[NS] = true;
- });
- });
- const rawRules = compiler.options.module.rules;
- // use webpack's RuleSet utility to normalize user rules
- const rules = new RuleSet(rawRules).rules;
- // find the rule that applies to vue files
- let vueRuleIndex = rawRules.findIndex(createMatcher(`foo.vue`));
- if (vueRuleIndex < 0) {
- vueRuleIndex = rawRules.findIndex(createMatcher(`foo.vue.html`));
- }
- const vueRule = rules[vueRuleIndex];
- if (!vueRule) {
- throw new Error(`[VueLoaderPlugin Error] No matching rule for .vue files found.\n` +
- `Make sure there is at least one root-level rule that matches .vue or .vue.html files.`);
- }
- if (vueRule.oneOf) {
- throw new Error(`[VueLoaderPlugin Error] vue-loader currently does not support vue rules with oneOf.`);
- }
- // get the normlized "use" for vue files
- const vueUse = vueRule.use;
- // get vue-loader options
- const vueLoaderUseIndex = vueUse.findIndex((u) => {
- // FIXME: this code logic is incorrect when project paths starts with `vue-loader-something`
- return /^vue-loader|(\/|\\|@)vue-loader/.test(u.loader || '');
- });
- if (vueLoaderUseIndex < 0) {
- throw new Error(`[VueLoaderPlugin Error] No matching use for vue-loader is found.\n` +
- `Make sure the rule matching .vue files include vue-loader in its use.`);
- }
- const vueLoaderUse = vueUse[vueLoaderUseIndex];
- const vueLoaderOptions = (vueLoaderUse.options =
- vueLoaderUse.options || {});
- // for each user rule (except the vue rule), create a cloned rule
- // that targets the corresponding language blocks in *.vue files.
- const clonedRules = rules.filter((r) => r !== vueRule).map(cloneRule);
- // rule for template compiler
- const templateCompilerRule = {
- loader: require.resolve('./templateLoader'),
- resourceQuery: (query) => {
- const parsed = qs.parse(query.slice(1));
- return parsed.vue != null && parsed.type === 'template';
- },
- options: Object.assign({ ident: vueLoaderUse.ident }, vueLoaderOptions),
- };
- // for each rule that matches plain .js/.ts files, also create a clone and
- // match it against the compiled template code inside *.vue files, so that
- // compiled vue render functions receive the same treatment as user code
- // (mostly babel)
- const matchesJS = createMatcher(`test.js`);
- const matchesTS = createMatcher(`test.ts`);
- const jsRulesForRenderFn = rules
- .filter((r) => r !== vueRule && (matchesJS(r) || matchesTS(r)))
- .map(cloneRuleForRenderFn);
- // pitcher for block requests (for injecting stylePostLoader and deduping
- // loaders matched for src imports)
- const pitcher = {
- loader: require.resolve('./pitcher'),
- resourceQuery: (query) => {
- const parsed = qs.parse(query.slice(1));
- return parsed.vue != null;
- },
- };
- // replace original rules
- compiler.options.module.rules = [
- pitcher,
- ...jsRulesForRenderFn,
- templateCompilerRule,
- ...clonedRules,
- ...rules,
- ];
- // 3.3 HMR support for imported types
- if ((0, util_1.needHMR)(vueLoaderOptions, compiler.options) &&
- compiler_1.compiler.invalidateTypeCache) {
- let watcher;
- const WatchPack = require('watchpack');
- compiler.hooks.afterCompile.tap(id, (compilation) => {
- if (compilation.compiler === compiler) {
- // type-only imports can be tree-shaken and not registered as a
- // watched file at all, so we have to manually ensure they are watched.
- const files = [...resolveScript_1.typeDepToSFCMap.keys()];
- const oldWatcher = watcher;
- watcher = new WatchPack({ aggregateTimeout: 0 });
- watcher.once('aggregated', (changes, removals) => {
- for (const file of changes) {
- // bust compiler-sfc type dep cache
- compiler_1.compiler.invalidateTypeCache(file);
- const affectedSFCs = resolveScript_1.typeDepToSFCMap.get(file);
- if (affectedSFCs) {
- for (const sfc of affectedSFCs) {
- // bust script resolve cache
- const desc = descriptorCache_1.descriptorCache.get(sfc);
- if (desc)
- resolveScript_1.clientCache.delete(desc);
- // force update importing SFC
- fs.writeFileSync(sfc, fs.readFileSync(sfc, 'utf-8'));
- }
- }
- }
- for (const file of removals) {
- compiler_1.compiler.invalidateTypeCache(file);
- }
- });
- watcher.watch({ files, startTime: Date.now() });
- if (oldWatcher) {
- oldWatcher.close();
- }
- }
- });
- compiler.hooks.watchClose.tap(id, () => {
- if (watcher) {
- watcher.close();
- }
- });
- // In some cases, e.g. in this project's tests,
- // even though needsHMR() returns true, webpack is not watching, thus no watchClose hook is called.
- // So we need to close the watcher when webpack is done.
- compiler.hooks.done.tap(id, () => {
- if (watcher) {
- watcher.close();
- }
- });
- }
- }
- }
- VueLoaderPlugin.NS = NS;
- function createMatcher(fakeFile) {
- return (rule) => {
- // #1201 we need to skip the `include` check when locating the vue rule
- const clone = Object.assign({}, rule);
- delete clone.include;
- const normalized = RuleSet.normalizeRule(clone, {}, '');
- return !rule.enforce && normalized.resource && normalized.resource(fakeFile);
- };
- }
- function cloneRule(rule) {
- const resource = rule.resource;
- const resourceQuery = rule.resourceQuery;
- // Assuming `test` and `resourceQuery` tests are executed in series and
- // synchronously (which is true based on RuleSet's implementation), we can
- // save the current resource being matched from `test` so that we can access
- // it in `resourceQuery`. This ensures when we use the normalized rule's
- // resource check, include/exclude are matched correctly.
- let currentResource;
- const res = Object.assign(Object.assign({}, rule), { resource: (resource) => {
- currentResource = resource;
- return true;
- }, resourceQuery: (query) => {
- const parsed = qs.parse(query.slice(1));
- if (parsed.vue == null) {
- return false;
- }
- if (resource && parsed.lang == null) {
- return false;
- }
- const fakeResourcePath = `${currentResource}.${parsed.lang}`;
- if (resource && !resource(fakeResourcePath)) {
- return false;
- }
- if (resourceQuery && !resourceQuery(query)) {
- return false;
- }
- return true;
- } });
- if (rule.rules) {
- res.rules = rule.rules.map(cloneRule);
- }
- if (rule.oneOf) {
- res.oneOf = rule.oneOf.map(cloneRule);
- }
- return res;
- }
- function cloneRuleForRenderFn(rule) {
- const resource = rule.resource;
- const resourceQuery = rule.resourceQuery;
- let currentResource;
- const res = Object.assign(Object.assign({}, rule), { resource: (resource) => {
- currentResource = resource;
- return true;
- }, resourceQuery: (query) => {
- const parsed = qs.parse(query.slice(1));
- if (parsed.vue == null || parsed.type !== 'template') {
- return false;
- }
- const fakeResourcePath = `${currentResource}.${parsed.ts ? `ts` : `js`}`;
- if (resource && !resource(fakeResourcePath)) {
- return false;
- }
- if (resourceQuery && !resourceQuery(query)) {
- return false;
- }
- return true;
- } });
- if (rule.rules) {
- res.rules = rule.rules.map(cloneRuleForRenderFn);
- }
- if (rule.oneOf) {
- res.oneOf = rule.oneOf.map(cloneRuleForRenderFn);
- }
- return res;
- }
- exports.default = VueLoaderPlugin;
|