By default the following tag/attribute combinations are transformed, and can be configured using the [transformAssetUrls](../options.md#transformasseturls) option.
``` js
{
video:['src','poster'],
source:'src',
img:'src',
image:'xlink:href'
}
```
In addition, if you have configured to use [css-loader](https://github.com/webpack-contrib/css-loader) for the `<style>` blocks, asset URLs in your CSS will also be processed in a similar fashion.
// AND `<style lang="scss">` blocks in `.vue` files
{
test:/\.scss$/,
use:[
...
...
@@ -204,7 +204,7 @@ module.exports = {
},
module:{
rules:[
// ...other rules omitted
// ...other rules omitted
{
test:/\.ts$/,
loader:'ts-loader',
...
...
@@ -212,7 +212,7 @@ module.exports = {
}
]
},
// ...plugin omitted
// ...plugin omitted
}
```
...
...
@@ -220,7 +220,7 @@ Configuration of TypeScipt can be done via `tsconfig.json`. Also see docs for [t
## Pug
Processing templates is a little different, because most webpack template loaders such as `pug-loader` return a template function instead of a compiled HTML string. Instead of using `pug-loader`, we need to use a loader that returns the raw HTML string instead, e.g. `pug-plain-loader`:
Processing templates is a little different, because most webpack template loaders such as `pug-loader` return a template function instead of a compiled HTML string. Instead of using `pug-loader`, we need to use a loader that returns the raw HTML string, e.g. `pug-plain-loader`:
``` bash
npm install-D pug pug-plain-loader
...
...
@@ -250,7 +250,7 @@ If you also intend to use it to import `.pug` files as HTML strings in JavaScrip
{
test:/\.pug$/,
oneOf:[
// this applies to <template lang="pug"> in Vue components
// this applies to `<template lang="pug">` in Vue components
We are in the process of upgrading Vue CLI 3 beta to use webpack 4 + Vue Loader 15, so you might want to wait if you are planning to upgrade to Vue CLI 3.
We are in the process of upgrading Vue CLI 3 beta to use webpack 4 + Vue Loader v15, so you might want to wait if you are planning to upgrade to Vue CLI 3.
:::
## Notable Breaking Changes
### A Plugin is Now Required
Vue Loader 15 now requires an accompanying webpack plugin to function properly:
Vue Loader v15 now requires an accompanying webpack plugin to function properly:
``` js
// webpack.config.js
...
...
@@ -29,7 +29,7 @@ module.exports = {
### Loader Inference
Vue Loader 15 now uses a different strategy to infer loaders to use for language blocks.
Vue Loader v15 now uses a different strategy to infer loaders to use for language blocks.
Take `<style lang="less">` as an example: in v14 and below, it will attempt to load the block with `less-loader`, and implicitly chains `css-loader` and `vue-style-loader` after it, all using inline loader strings.
...
...
@@ -39,7 +39,7 @@ In v15, `<style lang="less">` will behave as if it's an actual `*.less` file bei
{
module:{
rules:[
// ...other rules
// ...other rules
{
test:/\.less$/,
use:[
...
...
@@ -102,7 +102,7 @@ If you also intend to use it to import `.pug` files as HTML strings in JavaScrip
{
test:/\.pug$/,
oneOf:[
// this applies to <template lang="pug"> in Vue components
// this applies to `<template lang="pug">` in Vue components
{
resourceQuery:/^\?vue/,
use:['pug-plain-loader']
...
...
@@ -158,13 +158,13 @@ The good news is that you can now configure `localIdentName` in one place:
}
```
If you only want to use CSS Modules in some of your Vue components, you can use a `oneOf` rule and check for the `module` string in resourceQuery:
If you only want to use CSS Modules in some of your Vue components, you can use a `oneOf` rule and check for the `module` string in `resourceQuery`:
``` js
{
test:/\.css$/,
oneOf:[
// this matches <style module>
// this matches `<style module>`
{
resourceQuery:/module/,
use:[
...
...
@@ -178,7 +178,7 @@ If you only want to use CSS Modules in some of your Vue components, you can use
}
]
},
// this matches plain <style> or <style scoped>
// this matches plain `<style>` or `<style scoped>`
{
use:[
'vue-style-loader',
...
...
@@ -203,7 +203,7 @@ Works the same way as you'd configure it for normal CSS. Example usage with [min
},
{
test:/\.css$/,
// or ExtractTextWebpackPlugin.extract(...)
// or `ExtractTextWebpackPlugin.extract(...)`
use:[
MiniCssExtractPlugin.loader,
'css-loader'
...
...
@@ -230,7 +230,7 @@ externals: nodeExternals({
})
```
With v15, imports for `<style src="dep/foo.css">` now has resourceQuery strings appended at the end of the request, so you need to update the above to:
With v15, imports for `<style src="dep/foo.css">` now has `resourceQuery` strings appended at the end of the request, so you need to update the above to:
``` js
externals:nodeExternals({
...
...
@@ -261,7 +261,7 @@ The following option has been renamed:
-`transformToRequire` (now renamed to `transformAssetUrls`)
The following option has been changed to resourceQuery:
The following option has been changed to `resourceQuery`:
-`shadowMode` (now use inline resource queries, e.g. `foo.vue?shadow`)
Configure ES2015+ to ES5 transpiling options for the generated render function code. The [transpiler](https://github.com/vuejs/vue-template-es2015-compiler) is a fork of [Buble](https://github.com/Rich-Harris/buble), so consult the available options [here](https://buble.surge.sh/guide/#using-the-javascript-api).
The template render functions compilation supports a special transform `stripWith` (enabled by default), which removes the `with` usage in generated render functions to make them strict-mode compliant. This is enabled by default.
The template render functions compilation supports a special transform `stripWith` (enabled by default), which removes the `with` usage in generated render functions to make them strict-mode compliant.
