Skip to content

Commit fac3989

Browse files
gbezyukgbezyuk
authored
Merge pull request #7 from vuejs/master
merge upstream
2 parents 7fbefbe + c1778ff commit fac3989

32 files changed

+968
-325
lines changed

‎LICENSE

+1-2
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
The MIT License (MIT)
22

3-
Copyright (c) 2015 Q42
3+
Copyright (c) 2015-present Yuxi (Evan) You
44

55
Permission is hereby granted, free of charge, to any person obtaining a copy
66
of this software and associated documentation files (the "Software"), to deal
@@ -19,4 +19,3 @@ AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
1919
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
2020
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
2121
SOFTWARE.
22-

‎README.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
# vue-loader [![Build Status](https://circleci.com/gh/vuejs/vue-loader/tree/master.svg?style=shield)](https://circleci.com/gh/vuejs/vue-loader/tree/master) [![npm package](https://img.shields.io/npm/v/vue-loader.svg?maxAge=2592000)](https://www.npmjs.com/package/vue-loader)
1+
# vue-loader [![Build Status](https://circleci.com/gh/vuejs/vue-loader/tree/master.svg?style=shield)](https://circleci.com/gh/vuejs/vue-loader/tree/master) [![Windows Build status](https://ci.appveyor.com/api/projects/status/8cdonrkbg6m4k1tm/branch/master?svg=true)](https://ci.appveyor.com/project/yyx990803/vue-loader/branch/master) [![npm package](https://img.shields.io/npm/v/vue-loader.svg?maxAge=2592000)](https://www.npmjs.com/package/vue-loader)
22

33
> Vue.js component loader for [Webpack](http://webpack.github.io).
44

‎appveyor.yml

+21
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
# Test against the latest version of this Node.js version
2+
environment:
3+
nodejs_version: "6"
4+
5+
# Install scripts. (runs after repo cloning)
6+
install:
7+
# Get the latest stable version of Node.js or io.js
8+
- ps: Install-Product node $env:nodejs_version
9+
# install modules
10+
- npm install
11+
12+
# Post-install test scripts.
13+
test_script:
14+
# Output useful info for debugging.
15+
- node --version
16+
- npm --version
17+
# run tests
18+
- npm test
19+
20+
# Don't actually build.
21+
build: off

‎docs/en/README.md

+1
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@ There are many cool features provided by `vue-loader`:
1010

1111
- ES2015 enabled by default;
1212
- Allows using other Webpack loaders for each part of a Vue component, for example SASS for `<style>` and Jade for `<template>`;
13+
- Allows custom sections in a .vue file that can have custom loader chains applied to them
1314
- Treat static assets referenced in `<style>` and `<template>` as module dependencies and handle them with Webpack loaders;
1415
- Can simulate scoped CSS for each component;
1516
- Supports component hot-reloading during development.

‎docs/en/SUMMARY.md

+1
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@
1212
- [Asset URL Handling](configurations/asset-url.md)
1313
- [Advanced Loader Configuration](configurations/advanced.md)
1414
- [Extracting CSS File](configurations/extract-css.md)
15+
- [Custom Blocks](configurations/custom-blocks.md)
1516
- Workflow
1617
- [Production Build](workflow/production.md)
1718
- [Linting](workflow/linting.md)

‎docs/en/configurations/advanced.md

+52-26
Original file line numberDiff line numberDiff line change
@@ -1,54 +1,80 @@
11
# Advanced Loader Configuration
22

3-
Sometimes you may want to apply a custom loader string to a language instead of letting `vue-loader` infer it. Or you may simply want to overwrite the built-in loader configuration for the default languages. To do that, add a `vue` block in your Webpack config file, and specify the `loaders` option.
3+
Sometimes the you may want to:
44

5-
### Webpack 1.x
5+
1. Apply a custom loader string to a language instead of letting `vue-loader` infer it;
6+
7+
2. Overwrite the built-in loader configuration for the default languages;
8+
9+
3. Pre-process or post-process a specific language block with custom loaders.
10+
11+
To do that, specify the `loaders` option for `vue-loader`:
12+
13+
> Note that `preLoaders` and `postLoaders` are only supported in >=10.3.0
14+
15+
### Webpack 2.x
616

717
``` js
8-
// webpack.config.js
918
module.exports = {
1019
// other options...
1120
module: {
12-
loaders: [
21+
// module.rules is the same as module.loaders in 1.x
22+
rules: [
1323
{
1424
test: /\.vue$/,
15-
loader: 'vue'
25+
loader: 'vue-loader',
26+
options: {
27+
// `loaders` will overwrite the default loaders.
28+
// The following config will cause all <script> tags without "lang"
29+
// attribute to be loaded with coffee-loader
30+
loaders: {
31+
js: 'coffee-loader'
32+
},
33+
34+
// `preLoaders` are attached before the default loaders.
35+
// You can use this to pre-process language blocks - a common use
36+
// case would be build-time i18n.
37+
preLoaders: {
38+
js: '/path/to/custom/loader'
39+
},
40+
41+
// `postLoaders` are attached after the default loaders.
42+
//
43+
// - For `html`, the result returned by the default loader
44+
// will be compiled JavaScript render function code.
45+
//
46+
// - For `css`, the result will be returned by vue-style-loader
47+
// which isn't particularly useful in most cases. Using a postcss
48+
// plugin will be a better option.
49+
postLoaders: {
50+
html: 'babel-loader'
51+
}
52+
}
1653
}
1754
]
18-
},
19-
// vue-loader configurations
20-
vue: {
21-
// ... other vue options
22-
loaders: {
23-
// load all <script> without "lang" attribute with coffee-loader
24-
js: 'coffee',
25-
// load <template> directly as HTML string, without piping it
26-
// through vue-html-loader first
27-
html: 'raw'
28-
}
2955
}
3056
}
3157
```
3258

33-
### Webpack 2.x (^2.1.0-beta.25)
59+
### Webpack 1.x
3460

3561
``` js
62+
// webpack.config.js
3663
module.exports = {
3764
// other options...
3865
module: {
39-
// module.rules is the same as module.loaders in 1.x
40-
rules: [
66+
loaders: [
4167
{
4268
test: /\.vue$/,
43-
loader: 'vue-loader',
44-
// vue-loader options goes here
45-
options: {
46-
loaders: {
47-
// ...
48-
}
49-
}
69+
loader: 'vue'
5070
}
5171
]
72+
},
73+
// vue-loader configurations
74+
vue: {
75+
loaders: {
76+
// same configuration rules as above
77+
}
5278
}
5379
}
5480
```

‎docs/en/configurations/asset-url.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,6 @@ Because `.png` is not a JavaScript file, you will need to configure Webpack to u
1818

1919
The benefits of all this are:
2020

21-
1. `file-loader` allows you to designate where to copy and place the asset file, and how to name it using version hashes for better caching. Moreoever, this also means **you can just place images next to your `*.vue` files and use relative paths based on the folder structure instead of worrying about deployment URLs**. With proper config, Webpack will auto-rewrite the file paths into correct URLs in the bundled output.
21+
1. `file-loader` allows you to designate where to copy and place the asset file, and how to name it using version hashes for better caching. Moreover, this also means **you can just place images next to your `*.vue` files and use relative paths based on the folder structure instead of worrying about deployment URLs**. With proper config, Webpack will auto-rewrite the file paths into correct URLs in the bundled output.
2222

2323
2. `url-loader` allows you to conditionally inline a file as base-64 data URL if they are smaller than a given threshold. This can reduce the amount of HTTP requests for trivial files. If the file is larger than the threshold, it automatically falls back to `file-loader`.

‎docs/en/configurations/custom-blocks.md

+67
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,67 @@
1+
# Custom Blocks
2+
3+
> Requires 10.2.0+
4+
5+
You can define custom language blocks inside `*.vue` files. The content of a custom block will be processed by the loaders specified in the `loaders` object of `vue-loader` options and then required by the component module. The configuration is similar to what is described in [Advanced Loader Configuration](../configurations/advanced.md), except the matching uses the tag name instead of the `lang` attribute.
6+
7+
If a matching loader is found for a custom block, it will be processed; otherwise the custom block will simply be ignored.
8+
9+
## Example
10+
11+
Here's an example of extracting all `<docs>` custom blocks into a single docs file:
12+
13+
#### component.vue
14+
15+
``` html
16+
<docs>
17+
## This is an Example component.
18+
</docs>
19+
20+
<template>
21+
<h2 class="red">{{msg}}</h2>
22+
</template>
23+
24+
<script>
25+
export default {
26+
data () {
27+
return {
28+
msg: 'Hello from Component A!'
29+
}
30+
}
31+
}
32+
</script>
33+
34+
<style>
35+
comp-a h2 {
36+
color: #f00;
37+
}
38+
</style>
39+
```
40+
41+
#### webpack.config.js
42+
43+
``` js
44+
// Webpack 2.x
45+
var ExtractTextPlugin = require("extract-text-webpack-plugin")
46+
47+
module.exports = {
48+
module: {
49+
rules: [
50+
{
51+
test: /\.vue$/,
52+
loader: 'vue',
53+
options: {
54+
loaders: {
55+
// extract all <docs> content as raw text
56+
'docs': ExtractTextPlugin.extract('raw-loader'),
57+
}
58+
}
59+
}
60+
],
61+
plugins: [
62+
// output all docs into a single file
63+
new ExtractTextPlugin('docs.md')
64+
]
65+
}
66+
}
67+
```

‎docs/en/configurations/extract-css.md

+25-25
Original file line numberDiff line numberDiff line change
@@ -2,10 +2,10 @@
22

33
Example config to extract all the processed CSS in all Vue components into a single CSS file:
44

5-
### Webpack 1.x
5+
### Webpack 2.x
66

77
``` bash
8-
npm install extract-text-webpack-plugin --save-dev
8+
npm install extract-text-webpack-plugin@2.x --save-dev
99
```
1010

1111
``` js
@@ -15,30 +15,31 @@ var ExtractTextPlugin = require("extract-text-webpack-plugin")
1515
module.exports = {
1616
// other options...
1717
module: {
18-
loaders: [
18+
rules: [
1919
{
2020
test: /\.vue$/,
21-
loader: 'vue'
22-
},
21+
loader: 'vue-loader',
22+
options: {
23+
loaders: {
24+
css: ExtractTextPlugin.extract({
25+
loader: 'css-loader',
26+
fallbackLoader: 'vue-style-loader' // <- this is a dep of vue-loader, so no need to explicitly install if using npm3
27+
})
28+
}
29+
}
30+
}
2331
]
2432
},
25-
vue: {
26-
loaders: {
27-
css: ExtractTextPlugin.extract("css"),
28-
// you can also include <style lang="less"> or other langauges
29-
less: ExtractTextPlugin.extract("css!less")
30-
}
31-
},
3233
plugins: [
3334
new ExtractTextPlugin("style.css")
3435
]
3536
}
3637
```
3738

38-
### Webpack 2.x (^2.1.0-beta.25)
39+
### Webpack 1.x
3940

4041
``` bash
41-
npm install extract-text-webpack-plugin@2.x --save-dev
42+
npm install extract-text-webpack-plugin --save-dev
4243
```
4344

4445
``` js
@@ -48,21 +49,20 @@ var ExtractTextPlugin = require("extract-text-webpack-plugin")
4849
module.exports = {
4950
// other options...
5051
module: {
51-
rules: [
52+
loaders: [
5253
{
5354
test: /\.vue$/,
54-
loader: 'vue-loader',
55-
options: {
56-
loaders: {
57-
css: ExtractTextPlugin.extract({
58-
loader: 'css-loader',
59-
fallbackLoader: 'vue-style-loader' // <- this is a dep of vue-loader, so no need to explicitly install if using npm3
60-
})
61-
}
62-
}
63-
}
55+
loader: 'vue'
56+
},
6457
]
6558
},
59+
vue: {
60+
loaders: {
61+
css: ExtractTextPlugin.extract("css"),
62+
// you can also include <style lang="less"> or other langauges
63+
less: ExtractTextPlugin.extract("css!less")
64+
}
65+
},
6666
plugins: [
6767
new ExtractTextPlugin("style.css")
6868
]

‎docs/en/configurations/pre-processors.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,7 @@ Under the hood, the text content inside the `<style>` tag will be first compiled
2020

2121
#### sass-loader caveat
2222

23-
Contrary to what its name indicates, [*sass*-loader](https://github.com/jtangelder/sass-loader) parses *SCSS* syntax by default. If you actually want to use the indented *SASS* syntax, you have to configure vuel-loader's options for sass-loader accordingly.
23+
Contrary to what its name indicates, [*sass*-loader](https://github.com/jtangelder/sass-loader) parses *SCSS* syntax by default. If you actually want to use the indented *SASS* syntax, you have to configure vue-loader's options for sass-loader accordingly.
2424

2525
```javascript
2626
{

‎docs/en/features/postcss.md

+14
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,20 @@
22

33
Any CSS output processed by `vue-loader` is piped through [PostCSS](https://github.com/postcss/postcss) for scoped CSS rewriting. You can also add custom PostCSS plugins to the process, for example [autoprefixer](https://github.com/postcss/autoprefixer) or [CSSNext](http://cssnext.io/).
44

5+
## Using a Config File
6+
7+
Starting in 11.0 `vue-loader` supports auto-loading the same PostCss config files supported by `postcss-loader`:
8+
9+
- `postcss.config.js`
10+
- `.postcssrc`
11+
- `postcss` field in `package.json`
12+
13+
Using a config file allows you to share the same config between your normal CSS files processed by `postcss-loader` and the CSS inside `*.vue` files, and is recommended.
14+
15+
## Inline Options
16+
17+
Alternatively, you can specify postcss config specifically for `*.vue` files using the `postcss` option for `vue-loader`.
18+
519
Example usage in Webpack 1.x:
620

721
``` js

0 commit comments

Comments
 (0)