diff --git a/docs/migrating.md b/docs/migrating.md index 73586d5de..f2d281a37 100644 --- a/docs/migrating.md +++ b/docs/migrating.md @@ -251,6 +251,10 @@ The following options have been deprecated and should be configured using normal - `extractCSS` - `template` +:::tip +Template render functions cannot be post-processed by Webpack Rules because the `enforce: 'post'` option is not preserved for Vue Loader to interact with. `templatePostLoaders` now exists to accommodate these use cases. +::: + The following options have been deprecated and should be configured using the new `compilerOptions` option: - `preserveWhitespace` (use `compilerOptions.preserveWhitespace`) diff --git a/docs/options.md b/docs/options.md index 2be9e0314..689755ae4 100644 --- a/docs/options.md +++ b/docs/options.md @@ -85,3 +85,10 @@ When both options are specified, enables file-system-based template compilation ::: tip Interaction between `vue-loader` and `cache-loader` uses [inline loader import syntax](https://webpack.js.org/concepts/loaders/#inline) under the hook, the `!` will be treated as the separator between different loaders, so please ensure `cacheDirectory` doesn't contain `!`. ::: + +## templatePostLoaders + +- type: `Array` +- default: `[]` + +Attach an array of loaders to post-process a template's render function. This option only exists because Webpack's `enforce: 'post'` option is not preserved and cannot be used to determine whether loaders defined as Rules within a Webpack configuration should be attached after the `template-compiler`. diff --git a/lib/index.js b/lib/index.js index 1760b75ae..d5da88ef7 100644 --- a/lib/index.js +++ b/lib/index.js @@ -93,7 +93,7 @@ module.exports = function (source) { const src = descriptor.template.src || resourcePath const idQuery = `&id=${id}` const scopedQuery = hasScoped ? `&scoped=true` : `` - const attrsQuery = attrsToQuery(descriptor.template.attrs) + const attrsQuery = attrsToQuery(descriptor.template.attrs, 'html') const query = `?vue&type=template${idQuery}${scopedQuery}${attrsQuery}${inheritQuery}` const request = templateRequest = stringifyRequest(src + query) templateImport = `import { render, staticRenderFns } from ${request}` diff --git a/lib/loaders/pitcher.js b/lib/loaders/pitcher.js index 184e8fd09..0e9fe8202 100644 --- a/lib/loaders/pitcher.js +++ b/lib/loaders/pitcher.js @@ -80,6 +80,7 @@ module.exports.pitch = function (remainingRequest) { : [] const request = genRequest([ ...cacheLoader, + ...options.templatePostLoaders, templateLoaderPath + `??vue-loader-options`, ...loaders ]) diff --git a/lib/loaders/stylePostLoader.js b/lib/loaders/stylePostLoader.js index de8d09eba..8e1e6d5e7 100644 --- a/lib/loaders/stylePostLoader.js +++ b/lib/loaders/stylePostLoader.js @@ -2,7 +2,7 @@ const qs = require('querystring') const { compileStyle } = require('@vue/component-compiler-utils') // This is a post loader that handles scoped CSS transforms. -// Injected right before css-loader by the global pitcher (../pitch.js) +// Injected right before css-loader by the global pitcher (./pitcher.js) // for any