Skip to content
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.

Commit 3149f6d

Browse files
h-a-n-ah-a-n-a
authoredJun 1, 2023
feat: support experimental inline match resource (#2046)
1 parent 6ad8056 commit 3149f6d

File tree

15 files changed

+335
-69
lines changed

15 files changed

+335
-69
lines changed
 

‎.github/workflows/ci.yml

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -30,3 +30,15 @@ jobs:
3030
cache: 'yarn'
3131
- run: yarn install
3232
- run: yarn test
33+
34+
test-webpack5-inline-match-resource:
35+
runs-on: ubuntu-latest
36+
steps:
37+
- uses: actions/checkout@v2
38+
- name: Set node version to 16
39+
uses: actions/setup-node@v2
40+
with:
41+
node-version: 16
42+
cache: 'yarn'
43+
- run: yarn install
44+
- run: yarn test:match-resource

‎README.md

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,10 @@
44
55
- [Documentation](https://vue-loader.vuejs.org)
66

7+
## v17.1+ Only Options
8+
9+
- `experimentalInlineMatchResource: boolean`: enable [Inline matchResource](https://webpack.js.org/api/loaders/#inline-matchresource) for rule matching for vue-loader.
10+
711
## v16+ Only Options
812

913
- `reactivityTransform: boolean`: enable [Vue Reactivity Transform](https://github.com/vuejs/rfcs/discussions/369) (SFCs only).

‎jest.config.js

Lines changed: 9 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,12 @@
1-
console.log(`running tests with webpack ${process.env.WEBPACK4 ? '4' : '5'}...`)
1+
const isWebpack4 = process.env.WEBPACK4
2+
3+
console.log(
4+
`running tests with webpack ${isWebpack4 ? '4' : '5'}${
5+
!isWebpack4 && process.env.INLINE_MATCH_RESOURCE
6+
? ' with inline match resource enabled'
7+
: ''
8+
}...`
9+
)
210

311
module.exports = {
412
preset: 'ts-jest',

‎package.json

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,8 @@
1414
"build": "tsc",
1515
"pretest": "tsc",
1616
"test": "jest",
17+
"pretest:match-resource": "tsc",
18+
"test:match-resource": "INLINE_MATCH_RESOURCE=true jest",
1719
"pretest:webpack4": "tsc",
1820
"test:webpack4": "WEBPACK4=true jest",
1921
"dev-example": "node example/devServer.js --config example/webpack.config.js --inline --hot",

‎src/index.ts

Lines changed: 76 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,12 @@ import { formatError } from './formatError'
2020
import VueLoaderPlugin from './plugin'
2121
import { canInlineTemplate } from './resolveScript'
2222
import { setDescriptor } from './descriptorCache'
23-
import { getOptions, stringifyRequest as _stringifyRequest } from './util'
23+
import {
24+
getOptions,
25+
stringifyRequest as _stringifyRequest,
26+
genMatchResource,
27+
testWebpack5,
28+
} from './util'
2429

2530
export { VueLoaderPlugin }
2631

@@ -51,6 +56,7 @@ export interface VueLoaderOptions {
5156
exposeFilename?: boolean
5257
appendExtension?: boolean
5358
enableTsInTemplate?: boolean
59+
experimentalInlineMatchResource?: boolean
5460

5561
isServerBuild?: boolean
5662
}
@@ -90,18 +96,23 @@ export default function loader(
9096
rootContext,
9197
resourcePath,
9298
resourceQuery: _resourceQuery = '',
99+
_compiler,
93100
} = loaderContext
94101

102+
const isWebpack5 = testWebpack5(_compiler)
95103
const rawQuery = _resourceQuery.slice(1)
96104
const incomingQuery = qs.parse(rawQuery)
97105
const resourceQuery = rawQuery ? `&${rawQuery}` : ''
98106
const options = (getOptions(loaderContext) || {}) as VueLoaderOptions
107+
const enableInlineMatchResource =
108+
isWebpack5 && Boolean(options.experimentalInlineMatchResource)
99109

100110
const isServer = options.isServerBuild ?? target === 'node'
101111
const isProduction =
102112
mode === 'production' || process.env.NODE_ENV === 'production'
103113

104114
const filename = resourcePath.replace(/\?.*$/, '')
115+
105116
const { descriptor, errors } = parse(source, {
106117
filename,
107118
sourceMap,
@@ -167,10 +178,23 @@ export default function loader(
167178
if (script || scriptSetup) {
168179
const lang = script?.lang || scriptSetup?.lang
169180
isTS = !!(lang && /tsx?/.test(lang))
181+
const externalQuery = Boolean(script && !scriptSetup && script.src)
182+
? `&external`
183+
: ``
170184
const src = (script && !scriptSetup && script.src) || resourcePath
171185
const attrsQuery = attrsToQuery((scriptSetup || script)!.attrs, 'js')
172-
const query = `?vue&type=script${attrsQuery}${resourceQuery}`
173-
const scriptRequest = stringifyRequest(src + query)
186+
const query = `?vue&type=script${attrsQuery}${resourceQuery}${externalQuery}`
187+
188+
let scriptRequest: string
189+
190+
if (enableInlineMatchResource) {
191+
scriptRequest = stringifyRequest(
192+
genMatchResource(this, src, query, lang || 'js')
193+
)
194+
} else {
195+
scriptRequest = stringifyRequest(src + query)
196+
}
197+
174198
scriptImport =
175199
`import script from ${scriptRequest}\n` +
176200
// support named exports
@@ -184,13 +208,27 @@ export default function loader(
184208
const useInlineTemplate = canInlineTemplate(descriptor, isProduction)
185209
if (descriptor.template && !useInlineTemplate) {
186210
const src = descriptor.template.src || resourcePath
211+
const externalQuery = Boolean(descriptor.template.src) ? `&external` : ``
187212
const idQuery = `&id=${id}`
188213
const scopedQuery = hasScoped ? `&scoped=true` : ``
189214
const attrsQuery = attrsToQuery(descriptor.template.attrs)
190215
const tsQuery =
191216
options.enableTsInTemplate !== false && isTS ? `&ts=true` : ``
192-
const query = `?vue&type=template${idQuery}${scopedQuery}${tsQuery}${attrsQuery}${resourceQuery}`
193-
templateRequest = stringifyRequest(src + query)
217+
const query = `?vue&type=template${idQuery}${scopedQuery}${tsQuery}${attrsQuery}${resourceQuery}${externalQuery}`
218+
219+
if (enableInlineMatchResource) {
220+
templateRequest = stringifyRequest(
221+
genMatchResource(
222+
this,
223+
src,
224+
query,
225+
options.enableTsInTemplate !== false && isTS ? 'ts' : 'js'
226+
)
227+
)
228+
} else {
229+
templateRequest = stringifyRequest(src + query)
230+
}
231+
194232
templateImport = `import { ${renderFnName} } from ${templateRequest}`
195233
propsToAttach.push([renderFnName, renderFnName])
196234
}
@@ -205,12 +243,23 @@ export default function loader(
205243
.forEach((style, i) => {
206244
const src = style.src || resourcePath
207245
const attrsQuery = attrsToQuery(style.attrs, 'css')
246+
const lang = String(style.attrs.lang || 'css')
208247
// make sure to only pass id when necessary so that we don't inject
209248
// duplicate tags when multiple components import the same css file
210249
const idQuery = !style.src || style.scoped ? `&id=${id}` : ``
211250
const inlineQuery = asCustomElement ? `&inline` : ``
212-
const query = `?vue&type=style&index=${i}${idQuery}${inlineQuery}${attrsQuery}${resourceQuery}`
213-
const styleRequest = stringifyRequest(src + query)
251+
const externalQuery = Boolean(style.src) ? `&external` : ``
252+
const query = `?vue&type=style&index=${i}${idQuery}${inlineQuery}${attrsQuery}${resourceQuery}${externalQuery}`
253+
254+
let styleRequest
255+
if (enableInlineMatchResource) {
256+
styleRequest = stringifyRequest(
257+
genMatchResource(this, src, query, lang)
258+
)
259+
} else {
260+
styleRequest = stringifyRequest(src + query)
261+
}
262+
214263
if (style.module) {
215264
if (asCustomElement) {
216265
loaderContext.emitError(
@@ -283,9 +332,27 @@ export default function loader(
283332
const issuerQuery = block.attrs.src
284333
? `&issuerPath=${qs.escape(resourcePath)}`
285334
: ''
286-
const query = `?vue&type=custom&index=${i}${blockTypeQuery}${issuerQuery}${attrsQuery}${resourceQuery}`
335+
336+
const externalQuery = Boolean(block.attrs.src) ? `&external` : ``
337+
const query = `?vue&type=custom&index=${i}${blockTypeQuery}${issuerQuery}${attrsQuery}${resourceQuery}${externalQuery}`
338+
339+
let customRequest
340+
341+
if (enableInlineMatchResource) {
342+
customRequest = stringifyRequest(
343+
genMatchResource(
344+
this,
345+
src as string,
346+
query,
347+
block.attrs.lang as string
348+
)
349+
)
350+
} else {
351+
customRequest = stringifyRequest(src + query)
352+
}
353+
287354
return (
288-
`import block${i} from ${stringifyRequest(src + query)}\n` +
355+
`import block${i} from ${customRequest}\n` +
289356
`if (typeof block${i} === 'function') block${i}(script)`
290357
)
291358
})

‎src/pitcher.ts

Lines changed: 61 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import type { LoaderDefinitionFunction, LoaderContext } from 'webpack'
22
import * as qs from 'querystring'
3-
import { stringifyRequest } from './util'
3+
import { getOptions, stringifyRequest, testWebpack5 } from './util'
44
import { VueLoaderOptions } from '.'
55

66
const selfPath = require.resolve('./index')
@@ -58,7 +58,40 @@ export const pitch = function () {
5858
})
5959

6060
// Inject style-post-loader before css-loader for scoped CSS and trimming
61+
const isWebpack5 = testWebpack5(context._compiler)
62+
const options = (getOptions(context) || {}) as VueLoaderOptions
6163
if (query.type === `style`) {
64+
if (isWebpack5 && context._compiler?.options.experiments.css) {
65+
// If user enables `experiments.css`, then we are trying to emit css code directly.
66+
// Although we can target requests like `xxx.vue?type=style` to match `type: "css"`,
67+
// it will make the plugin a mess.
68+
if (!options.experimentalInlineMatchResource) {
69+
context.emitError(
70+
new Error(
71+
'`experimentalInlineMatchResource` should be enabled if `experiments.css` enabled currently'
72+
)
73+
)
74+
return ''
75+
}
76+
77+
if (query.inline || query.module) {
78+
context.emitError(
79+
new Error(
80+
'`inline` or `module` is currently not supported with `experiments.css` enabled'
81+
)
82+
)
83+
return ''
84+
}
85+
86+
const loaderString = [stylePostLoaderPath, ...loaders]
87+
.map((loader) => {
88+
return typeof loader === 'string' ? loader : loader.request
89+
})
90+
.join('!')
91+
return `@import "${context.resourcePath}${
92+
query.lang ? `.${query.lang}` : ''
93+
}${context.resourceQuery}!=!-!${loaderString}!${context.resource}";`
94+
}
6295
const cssLoaderIndex = loaders.findIndex(isCSSLoader)
6396
if (cssLoaderIndex > -1) {
6497
// if inlined, ignore any loaders after css-loader and replace w/ inline
@@ -71,7 +104,8 @@ export const pitch = function () {
71104
return genProxyModule(
72105
[...afterLoaders, stylePostLoaderPath, ...beforeLoaders],
73106
context,
74-
!!query.module || query.inline != null
107+
!!query.module || query.inline != null,
108+
(query.lang as string) || 'css'
75109
)
76110
}
77111
}
@@ -84,15 +118,21 @@ export const pitch = function () {
84118

85119
// Rewrite request. Technically this should only be done when we have deduped
86120
// loaders. But somehow this is required for block source maps to work.
87-
return genProxyModule(loaders, context, query.type !== 'template')
121+
return genProxyModule(
122+
loaders,
123+
context,
124+
query.type !== 'template',
125+
query.ts ? 'ts' : (query.lang as string)
126+
)
88127
}
89128

90129
function genProxyModule(
91130
loaders: (Loader | string)[],
92131
context: LoaderContext<VueLoaderOptions>,
93-
exportDefault = true
132+
exportDefault = true,
133+
lang = 'js'
94134
) {
95-
const request = genRequest(loaders, context)
135+
const request = genRequest(loaders, lang, context)
96136
// return a proxy module which simply re-exports everything from the
97137
// actual request. Note for template blocks the compiled module has no
98138
// default export.
@@ -104,12 +144,28 @@ function genProxyModule(
104144

105145
function genRequest(
106146
loaders: (Loader | string)[],
147+
lang: string,
107148
context: LoaderContext<VueLoaderOptions>
108149
) {
150+
const isWebpack5 = testWebpack5(context._compiler)
151+
const options = (getOptions(context) || {}) as VueLoaderOptions
152+
const enableInlineMatchResource =
153+
isWebpack5 && options.experimentalInlineMatchResource
154+
109155
const loaderStrings = loaders.map((loader) => {
110156
return typeof loader === 'string' ? loader : loader.request
111157
})
112158
const resource = context.resourcePath + context.resourceQuery
159+
160+
if (enableInlineMatchResource) {
161+
return stringifyRequest(
162+
context,
163+
`${context.resourcePath}${lang ? `.${lang}` : ''}${
164+
context.resourceQuery
165+
}!=!-!${[...loaderStrings, resource].join('!')}`
166+
)
167+
}
168+
113169
return stringifyRequest(
114170
context,
115171
'-!' + [...loaderStrings, resource].join('!')

‎src/plugin.ts

Lines changed: 15 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,26 @@
1-
import webpack from 'webpack'
21
import type { Compiler } from 'webpack'
2+
import { testWebpack5 } from './util'
33

44
declare class VueLoaderPlugin {
55
static NS: string
66
apply(compiler: Compiler): void
77
}
88

9-
let Plugin: typeof VueLoaderPlugin
9+
const NS = 'vue-loader'
1010

11-
if (webpack.version && webpack.version[0] > '4') {
12-
// webpack5 and upper
13-
Plugin = require('./pluginWebpack5').default
14-
} else {
15-
// webpack4 and lower
16-
Plugin = require('./pluginWebpack4').default
11+
class Plugin {
12+
static NS = NS
13+
apply(compiler: Compiler) {
14+
let Ctor: typeof VueLoaderPlugin
15+
if (testWebpack5(compiler)) {
16+
// webpack5 and upper
17+
Ctor = require('./pluginWebpack5').default
18+
} else {
19+
// webpack4 and lower
20+
Ctor = require('./pluginWebpack4').default
21+
}
22+
new Ctor().apply(compiler)
23+
}
1724
}
1825

1926
export default Plugin

‎src/pluginWebpack5.ts

Lines changed: 48 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import * as qs from 'querystring'
22
import type { VueLoaderOptions } from './'
3-
import type { RuleSetRule, Compiler } from 'webpack'
3+
import type { RuleSetRule, Compiler, RuleSetUse } from 'webpack'
44
import { needHMR } from './util'
55
import { clientCache, typeDepToSFCMap } from './resolveScript'
66
import { compiler as vueCompiler } from './compiler'
@@ -146,7 +146,7 @@ class VueLoaderPlugin {
146146
)
147147
}
148148

149-
// get the normlized "use" for vue files
149+
// get the normalized "use" for vue files
150150
const vueUse = vueRules
151151
.filter((rule) => rule.type === 'use')
152152
.map((rule) => rule.value)
@@ -170,6 +170,8 @@ class VueLoaderPlugin {
170170
const vueLoaderUse = vueUse[vueLoaderUseIndex]
171171
const vueLoaderOptions = (vueLoaderUse.options =
172172
vueLoaderUse.options || {}) as VueLoaderOptions
173+
const enableInlineMatchResource =
174+
vueLoaderOptions.experimentalInlineMatchResource
173175

174176
// for each user rule (except the vue rule), create a cloned rule
175177
// that targets the corresponding language blocks in *.vue files.
@@ -221,16 +223,53 @@ class VueLoaderPlugin {
221223
const parsed = qs.parse(query.slice(1))
222224
return parsed.vue != null
223225
},
226+
options: vueLoaderOptions,
224227
}
225228

226229
// replace original rules
227-
compiler.options.module!.rules = [
228-
pitcher,
229-
...jsRulesForRenderFn,
230-
templateCompilerRule,
231-
...clonedRules,
232-
...rules,
233-
]
230+
if (enableInlineMatchResource) {
231+
// Match rules using `vue-loader`
232+
const vueLoaderRules = rules.filter((rule) => {
233+
const matchOnce = (use?: RuleSetUse) => {
234+
let loaderString = ''
235+
236+
if (!use) {
237+
return loaderString
238+
}
239+
240+
if (typeof use === 'string') {
241+
loaderString = use
242+
} else if (Array.isArray(use)) {
243+
loaderString = matchOnce(use[0])
244+
} else if (typeof use === 'object' && use.loader) {
245+
loaderString = use.loader
246+
}
247+
return loaderString
248+
}
249+
250+
const loader = rule.loader || matchOnce(rule.use)
251+
return (
252+
loader === require('../package.json').name ||
253+
loader.startsWith(require.resolve('./index'))
254+
)
255+
})
256+
257+
compiler.options.module!.rules = [
258+
pitcher,
259+
...rules.filter((rule) => !vueLoaderRules.includes(rule)),
260+
templateCompilerRule,
261+
...clonedRules,
262+
...vueLoaderRules,
263+
]
264+
} else {
265+
compiler.options.module!.rules = [
266+
pitcher,
267+
...jsRulesForRenderFn,
268+
templateCompilerRule,
269+
...clonedRules,
270+
...rules,
271+
]
272+
}
234273

235274
// 3.3 HMR support for imported types
236275
if (

‎src/util.ts

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import type { Compiler, LoaderContext } from 'webpack'
2+
import qs from 'querystring'
23
import type { SFCDescriptor, CompilerOptions } from 'vue/compiler-sfc'
34
import type { VueLoaderOptions } from '.'
45
import * as path from 'path'
@@ -163,3 +164,36 @@ export function stringifyRequest(
163164
.join('!')
164165
)
165166
}
167+
168+
export function genMatchResource(
169+
context: LoaderContext<VueLoaderOptions>,
170+
resourcePath: string,
171+
resourceQuery?: string,
172+
lang?: string
173+
) {
174+
resourceQuery = resourceQuery || ''
175+
176+
const loaders: string[] = []
177+
const parsedQuery = qs.parse(resourceQuery.slice(1))
178+
179+
// process non-external resources
180+
if ('vue' in parsedQuery && !('external' in parsedQuery)) {
181+
const currentRequest = context.loaders
182+
.slice(context.loaderIndex)
183+
.map((obj) => obj.request)
184+
loaders.push(...currentRequest)
185+
}
186+
const loaderString = loaders.join('!')
187+
188+
return `${resourcePath}${lang ? `.${lang}` : ''}${resourceQuery}!=!${
189+
loaderString ? `${loaderString}!` : ''
190+
}${resourcePath}${resourceQuery}`
191+
}
192+
193+
export const testWebpack5 = (compiler?: Compiler) => {
194+
if (!compiler) {
195+
return false
196+
}
197+
const webpackVersion = compiler?.webpack?.version
198+
return Boolean(webpackVersion && Number(webpackVersion.split('.')[0]) > 4)
199+
}

‎test/advanced.spec.ts

Lines changed: 15 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,12 @@
11
import { SourceMapConsumer } from 'source-map'
22
import { fs as mfs } from 'memfs'
3-
import { bundle, mockBundleAndRun, normalizeNewline, genId } from './utils'
3+
import {
4+
bundle,
5+
mockBundleAndRun,
6+
normalizeNewline,
7+
genId,
8+
DEFAULT_VUE_USE,
9+
} from './utils'
410

511
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
612

@@ -10,7 +16,7 @@ test('support chaining with other loaders', async () => {
1016
modify: (config) => {
1117
config!.module!.rules[0] = {
1218
test: /\.vue$/,
13-
use: ['vue-loader', require.resolve('./mock-loaders/js')],
19+
use: [DEFAULT_VUE_USE, require.resolve('./mock-loaders/js')],
1420
}
1521
},
1622
})
@@ -24,7 +30,7 @@ test.skip('inherit queries on files', async () => {
2430
modify: (config) => {
2531
config!.module!.rules[0] = {
2632
test: /\.vue$/,
27-
use: ['vue-loader', require.resolve('./mock-loaders/query')],
33+
use: [DEFAULT_VUE_USE, require.resolve('./mock-loaders/query')],
2834
}
2935
},
3036
})
@@ -92,7 +98,7 @@ test('extract CSS', async () => {
9298
config.module.rules = [
9399
{
94100
test: /\.vue$/,
95-
use: 'vue-loader',
101+
use: [DEFAULT_VUE_USE],
96102
},
97103
{
98104
test: /\.css$/,
@@ -126,7 +132,7 @@ test('extract CSS with code spliting', async () => {
126132
config.module.rules = [
127133
{
128134
test: /\.vue$/,
129-
use: 'vue-loader',
135+
use: [DEFAULT_VUE_USE],
130136
},
131137
{
132138
test: /\.css$/,
@@ -153,7 +159,10 @@ test('support rules with oneOf', async () => {
153159
entry,
154160
modify: (config: any) => {
155161
config!.module!.rules = [
156-
{ test: /\.vue$/, loader: 'vue-loader' },
162+
{
163+
test: /\.vue$/,
164+
use: [DEFAULT_VUE_USE],
165+
},
157166
{
158167
test: /\.css$/,
159168
use: 'style-loader',

‎test/edgeCases.spec.ts

Lines changed: 10 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,12 @@
11
import * as path from 'path'
22
import webpack from 'webpack'
3-
import { mfs, bundle, mockBundleAndRun, normalizeNewline } from './utils'
3+
import {
4+
mfs,
5+
bundle,
6+
mockBundleAndRun,
7+
normalizeNewline,
8+
DEFAULT_VUE_USE,
9+
} from './utils'
410

511
// @ts-ignore
612
function assertComponent({
@@ -37,7 +43,7 @@ test('vue rule with include', async () => {
3743
config.module.rules[i] = {
3844
test: /\.vue$/,
3945
include: /fixtures/,
40-
loader: 'vue-loader',
46+
use: [DEFAULT_VUE_USE],
4147
}
4248
},
4349
})
@@ -52,7 +58,7 @@ test('test-less oneOf rules', async () => {
5258
config!.module!.rules = [
5359
{
5460
test: /\.vue$/,
55-
loader: 'vue-loader',
61+
use: [DEFAULT_VUE_USE],
5662
},
5763
{
5864
oneOf: [
@@ -79,12 +85,7 @@ test('normalize multiple use + options', async () => {
7985
)
8086
config!.module!.rules[i] = {
8187
test: /\.vue$/,
82-
use: [
83-
{
84-
loader: 'vue-loader',
85-
options: {},
86-
},
87-
],
88+
use: [DEFAULT_VUE_USE],
8889
}
8990
},
9091
})

‎test/style.spec.ts

Lines changed: 8 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,9 @@
1-
import { mockBundleAndRun, genId, normalizeNewline } from './utils'
1+
import {
2+
mockBundleAndRun,
3+
genId,
4+
normalizeNewline,
5+
DEFAULT_VUE_USE,
6+
} from './utils'
27

38
test('scoped style', async () => {
49
const { window, instance, componentModule } = await mockBundleAndRun({
@@ -109,7 +114,7 @@ test('CSS Modules', async () => {
109114
config!.module!.rules = [
110115
{
111116
test: /\.vue$/,
112-
loader: 'vue-loader',
117+
use: [DEFAULT_VUE_USE],
113118
},
114119
{
115120
test: /\.css$/,
@@ -178,7 +183,7 @@ test('CSS Modules Extend', async () => {
178183
config!.module!.rules = [
179184
{
180185
test: /\.vue$/,
181-
loader: 'vue-loader',
186+
use: [DEFAULT_VUE_USE],
182187
},
183188
{
184189
test: /\.css$/,

‎test/template.spec.ts

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import * as path from 'path'
2-
import { mockBundleAndRun, normalizeNewline } from './utils'
2+
import { DEFAULT_VUE_USE, mockBundleAndRun, normalizeNewline } from './utils'
33

44
test('apply babel transformations to expressions in template', async () => {
55
const { instance } = await mockBundleAndRun({
@@ -111,7 +111,7 @@ test('should allow process custom file', async () => {
111111
rules: [
112112
{
113113
test: /\.svg$/,
114-
loader: 'vue-loader',
114+
use: [DEFAULT_VUE_USE],
115115
},
116116
],
117117
},

‎test/utils.ts

Lines changed: 37 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,13 @@ import { JSDOM, VirtualConsole } from 'jsdom'
99
import { VueLoaderPlugin } from '..'
1010
import type { VueLoaderOptions } from '..'
1111

12+
export const DEFAULT_VUE_USE = {
13+
loader: 'vue-loader',
14+
options: {
15+
experimentalInlineMatchResource: Boolean(process.env.INLINE_MATCH_RESOURCE),
16+
},
17+
}
18+
1219
const baseConfig: webpack.Configuration = {
1320
mode: 'development',
1421
devtool: false,
@@ -29,11 +36,7 @@ const baseConfig: webpack.Configuration = {
2936
rules: [
3037
{
3138
test: /\.vue$/,
32-
loader: 'vue-loader',
33-
},
34-
{
35-
test: /\.css$/,
36-
use: ['style-loader', 'css-loader'],
39+
use: [DEFAULT_VUE_USE],
3740
},
3841
{
3942
test: /\.ts$/,
@@ -73,16 +76,41 @@ export function bundle(
7376
}> {
7477
let config: BundleOptions = merge({}, baseConfig, options)
7578

79+
if (!options.experiments?.css) {
80+
config.module?.rules?.push({
81+
test: /\.css$/,
82+
use: ['style-loader', 'css-loader'],
83+
})
84+
}
85+
7686
if (config.vue && config.module) {
77-
const vueOptions = options.vue
87+
const vueOptions = {
88+
// Test experimental inline match resource by default
89+
experimentalInlineMatchResource: Boolean(
90+
process.env.INLINE_MATCH_RESOURCE
91+
),
92+
...options.vue,
93+
}
94+
7895
delete config.vue
7996
const vueIndex = config.module.rules!.findIndex(
8097
(r: any) => r.test instanceof RegExp && r.test.test('.vue')
8198
)
8299
const vueRule = config.module.rules![vueIndex]
83-
config.module.rules![vueIndex] = Object.assign({}, vueRule, {
84-
options: vueOptions,
85-
})
100+
101+
// Detect `Rule.use` or `Rule.loader` and `Rule.options` combination
102+
if (vueRule && typeof vueRule === 'object' && Array.isArray(vueRule.use)) {
103+
// Vue usually locates at the first loader
104+
if (typeof vueRule.use?.[0] === 'object') {
105+
vueRule.use[0] = Object.assign({}, vueRule.use[0], {
106+
options: vueOptions,
107+
})
108+
}
109+
} else {
110+
config.module.rules![vueIndex] = Object.assign({}, vueRule, {
111+
options: vueOptions,
112+
})
113+
}
86114
}
87115

88116
if (typeof config.entry === 'string' && /\.vue/.test(config.entry)) {

‎tsconfig.json

Lines changed: 2 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -14,13 +14,7 @@
1414
"noImplicitAny": true,
1515
"removeComments": false,
1616
"skipLibCheck": true,
17-
"lib": [
18-
"es6",
19-
"es7",
20-
"DOM"
21-
]
17+
"lib": ["es6", "es7", "DOM"]
2218
},
23-
"include": [
24-
"src"
25-
]
19+
"include": ["src"]
2620
}

0 commit comments

Comments
 (0)
Please sign in to comment.