Commit 0039fb98 authored by 勾三股四's avatar 勾三股四 Committed by Evan You

[docs] typos (#1277)

parent 80452598
...@@ -48,14 +48,14 @@ module.exports = { ...@@ -48,14 +48,14 @@ module.exports = {
test: /\.vue$/, test: /\.vue$/,
loader: 'vue-loader' loader: 'vue-loader'
}, },
// this will apply to both plain .js files // this will apply to both plain `.js` files
// AND <script> blocks in vue files // AND `<script>` blocks in `.vue` files
{ {
test: /\.js$/, test: /\.js$/,
loader: 'babel-loader' loader: 'babel-loader'
}, },
// this will apply to both plain .css files // this will apply to both plain `.css` files
// AND <style> blocks in vue files // AND `<style>` blocks in `.vue` files
{ {
test: /\.css$/, test: /\.css$/,
use: [ use: [
......
...@@ -20,6 +20,15 @@ createElement('img', { ...@@ -20,6 +20,15 @@ createElement('img', {
By default the following tag/attribute combinations are transformed, and can be configured using the [transformAssetUrls](../options.md#transformasseturls) option. 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. 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.
## Transform Rules ## Transform Rules
......
...@@ -88,14 +88,14 @@ Refer to the [CSS Modules spec](https://github.com/css-modules/css-modules) for ...@@ -88,14 +88,14 @@ Refer to the [CSS Modules spec](https://github.com/css-modules/css-modules) for
## Opt-in Usage ## Opt-in Usage
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 ``` js
// webpack.config.js -> module.rules // webpack.config.js -> module.rules
{ {
test: /\.css$/, test: /\.css$/,
oneOf: [ oneOf: [
// this matches <style module> // this matches `<style module>`
{ {
resourceQuery: /module/, resourceQuery: /module/,
use: [ use: [
...@@ -109,7 +109,7 @@ If you only want to use CSS Modules in some of your Vue components, you can use ...@@ -109,7 +109,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: [ use: [
'vue-style-loader', 'vue-style-loader',
......
...@@ -18,7 +18,7 @@ module.exports = { ...@@ -18,7 +18,7 @@ module.exports = {
// other options... // other options...
module: { module: {
rules: [ rules: [
// ...other rules omitted // ... other rules omitted
{ {
test: /\.css$/, test: /\.css$/,
use: [ use: [
...@@ -31,7 +31,7 @@ module.exports = { ...@@ -31,7 +31,7 @@ module.exports = {
] ]
}, },
plugins: [ plugins: [
// ...vue-loader plugin omitted // ... Vue Loader plugin omitted
new MiniCssExtractPlugin({ new MiniCssExtractPlugin({
filename: style.css filename: style.css
}) })
...@@ -55,7 +55,7 @@ module.exports = { ...@@ -55,7 +55,7 @@ module.exports = {
// other options... // other options...
module: { module: {
rules: [ rules: [
// ...other rules omitted // ... other rules omitted
{ {
test: /\.css$/, test: /\.css$/,
loader: ExtractTextPlugin.extract({ loader: ExtractTextPlugin.extract({
...@@ -66,7 +66,7 @@ module.exports = { ...@@ -66,7 +66,7 @@ module.exports = {
] ]
}, },
plugins: [ plugins: [
// ...vue-loader plugin omitted // ... Vue Loader plugin omitted
new ExtractTextPlugin("style.css") new ExtractTextPlugin("style.css")
] ]
} }
......
...@@ -20,10 +20,10 @@ In your webpack config: ...@@ -20,10 +20,10 @@ In your webpack config:
module.exports = { module.exports = {
module: { module: {
rules: [ rules: [
// ...other rules omitted // ... other rules omitted
// this will apply to both plain .scss files // this will apply to both plain `.scss` files
// AND <style lang="scss"> blocks in vue files // AND `<style lang="scss">` blocks in `.vue` files
{ {
test: /\.scss$/, test: /\.scss$/,
use: [ use: [
...@@ -204,7 +204,7 @@ module.exports = { ...@@ -204,7 +204,7 @@ module.exports = {
}, },
module: { module: {
rules: [ rules: [
// ...other rules omitted // ... other rules omitted
{ {
test: /\.ts$/, test: /\.ts$/,
loader: 'ts-loader', loader: 'ts-loader',
...@@ -212,7 +212,7 @@ module.exports = { ...@@ -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 ...@@ -220,7 +220,7 @@ Configuration of TypeScipt can be done via `tsconfig.json`. Also see docs for [t
## Pug ## 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 ``` bash
npm install -D pug pug-plain-loader 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 ...@@ -250,7 +250,7 @@ If you also intend to use it to import `.pug` files as HTML strings in JavaScrip
{ {
test: /\.pug$/, test: /\.pug$/,
oneOf: [ oneOf: [
// this applies to <template lang="pug"> in Vue components // this applies to `<template lang="pug">` in Vue components
{ {
resourceQuery: /^\?vue/, resourceQuery: /^\?vue/,
use: ['pug-plain-loader'] use: ['pug-plain-loader']
......
...@@ -6,14 +6,14 @@ sidebarDepth: 2 ...@@ -6,14 +6,14 @@ sidebarDepth: 2
# Migrating from v14 # Migrating from v14
::: tip Heads Up ::: tip Heads Up
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 ## Notable Breaking Changes
### A Plugin is Now Required ### 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 ``` js
// webpack.config.js // webpack.config.js
...@@ -29,7 +29,7 @@ module.exports = { ...@@ -29,7 +29,7 @@ module.exports = {
### Loader Inference ### 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. 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 ...@@ -39,7 +39,7 @@ In v15, `<style lang="less">` will behave as if it's an actual `*.less` file bei
{ {
module: { module: {
rules: [ rules: [
// ...other rules // ... other rules
{ {
test: /\.less$/, test: /\.less$/,
use: [ use: [
...@@ -102,7 +102,7 @@ If you also intend to use it to import `.pug` files as HTML strings in JavaScrip ...@@ -102,7 +102,7 @@ If you also intend to use it to import `.pug` files as HTML strings in JavaScrip
{ {
test: /\.pug$/, test: /\.pug$/,
oneOf: [ oneOf: [
// this applies to <template lang="pug"> in Vue components // this applies to `<template lang="pug">` in Vue components
{ {
resourceQuery: /^\?vue/, resourceQuery: /^\?vue/,
use: ['pug-plain-loader'] use: ['pug-plain-loader']
...@@ -158,13 +158,13 @@ The good news is that you can now configure `localIdentName` in one place: ...@@ -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 ``` js
{ {
test: /\.css$/, test: /\.css$/,
oneOf: [ oneOf: [
// this matches <style module> // this matches `<style module>`
{ {
resourceQuery: /module/, resourceQuery: /module/,
use: [ use: [
...@@ -178,7 +178,7 @@ If you only want to use CSS Modules in some of your Vue components, you can 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: [ use: [
'vue-style-loader', 'vue-style-loader',
...@@ -203,7 +203,7 @@ Works the same way as you'd configure it for normal CSS. Example usage with [min ...@@ -203,7 +203,7 @@ Works the same way as you'd configure it for normal CSS. Example usage with [min
}, },
{ {
test: /\.css$/, test: /\.css$/,
// or ExtractTextWebpackPlugin.extract(...) // or `ExtractTextWebpackPlugin.extract(...)`
use: [ use: [
MiniCssExtractPlugin.loader, MiniCssExtractPlugin.loader,
'css-loader' 'css-loader'
...@@ -230,7 +230,7 @@ externals: nodeExternals({ ...@@ -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 ``` js
externals: nodeExternals({ externals: nodeExternals({
...@@ -261,7 +261,7 @@ The following option has been renamed: ...@@ -261,7 +261,7 @@ The following option has been renamed:
- `transformToRequire` (now renamed to `transformAssetUrls`) - `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`) - `shadowMode` (now use inline resource queries, e.g. `foo.vue?shadow`)
......
...@@ -43,7 +43,7 @@ sidebar: auto ...@@ -43,7 +43,7 @@ sidebar: auto
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). 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.
## optimizeSSR ## optimizeSSR
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment