Skip to content

Commit 552bcb7

Browse files
yyx990803yyx990803
committed
feat: support webpack 5
1 parent 36af01c commit 552bcb7

File tree

3 files changed

+519
-200
lines changed

3 files changed

+519
-200
lines changed

‎src/plugin.ts‎

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

20312
module.exports = VueLoaderPlugin

0 commit comments

Comments
 (0)