Add the vue template compiler onto any template loader specified in the vue.loaders configuration #595
Conversation
…he vue.loaders configuration. This enables, for example, using a markdown loader via <template lang="md"> in a .vue file. Without this tweak, the webpack config has to specify both the loader that converts the markdown (e.g.) to HTML AND template-compiler to compile it. That, however doesn't fully work because the webpack config can't know the moduleId generated by lib/loader.js and pass it in via the `id` parameter, so scoped styles won't work.
lib/loader.js
Outdated
| css: (isServer ? '' : styleLoaderPath + '!') + 'css-loader' + (needCssSourceMap ? '?sourceMap' : ''), | ||
| js: hasBuble ? ('buble-loader' + bubleOptions) : hasBabel ? 'babel-loader' : '' | ||
| } | ||
| var templateCompilerLoaderCommand = templateCompilerPath + '?id=' + moduleId |
There was a problem hiding this comment.
Why assign this as a separate variable here? We can just use defaultLoaders.html in both places
There was a problem hiding this comment.
If defaultLoaders.html is left as-is, then for the default case, var loader = loaders[lang] on line 140 grabs that string and the new code on 151-153 below also add the same string, resulting in template-compiler?id=abc!template-compiler?id=abc for the final loader string.
My rationale for pulling it out into a separate variable was to make the 2 cases similar:
- In the default case, the format of the template is HTML, which doesn't need a loader to translate it to HTML (
'') - In the case where a user specifies a lang, it's entry will be the loader specified in the config.
In both cases, var loader = loaders[lang] will grab the loader necessary to translate the input language to HTML, and then we can prepend template-compiler?id=abc to it to handle compiling the HTML spit out by the loader.
Having said that, if you prefer a different style, let me know.
Thanks!
There was a problem hiding this comment.
Thanks for the explanation - I think we can simply do this for line 151:
if (type === 'template' && loader !== defaultLoaders.html) {
loader = defaultLoaders.html + '!' + loader
}|
@yyx990803 Thank you for merging my 2 PRs! |
|
@asselin thank you for contributing! |
…he vue.loaders configuration (vuejs#595) * Tweak to add the vue template compiler onto any loader specified in the vue.loaders configuration. This enables, for example, using a markdown loader via <template lang="md"> in a .vue file. Without this tweak, the webpack config has to specify both the loader that converts the markdown (e.g.) to HTML AND template-compiler to compile it. That, however doesn't fully work because the webpack config can't know the moduleId generated by lib/loader.js and pass it in via the `id` parameter, so scoped styles won't work. * adjustments * add tests for custom html loader
This enables, for example, using a markdown loader via in a .vue file. Without this tweak, the webpack config has to specify both the loader that converts the markdown (e.g.) to HTML and template-compiler to compile it. That, however doesn't fully work because the webpack config can't know the moduleId generated by lib/loader.js and pass it in via the
idparameter, so scoped styles won't work.