File tree 17 files changed +190
-100
lines changed
17 files changed +190
-100
lines changed Original file line number Diff line number Diff line change 27
27
28
28
一个基本的例子,想像我们有一些 CommonJS 模块,它不能直接在浏览器中运行,所以我们需要打包成一个文件,这样就可以通过` <script> ` 标签加载。Webpack 可以遵循 ` require() ` 调用的依赖关系,为我们完成这些工作。
29
29
30
- 但是 Webpack 可以做的不止这些。使用 "loaders",我们可以配置 Webpack 以任何方式去转换所有类型的文件。一些例子包括 :
30
+ 但是 Webpack 可以做的不止这些。使用 "loaders",我们可以配置 Webpack 以任何方式去转换所有类型的文件。包括以下例子 :
31
31
32
- - 转换 ES2015, CoffeeScript 或者 TypeScript 模块为普通的 ES5 CommonJS 模块;
32
+ - 转换 ES2015, CoffeeScript 或者 TypeScript 模块为普通的 ES5 CommonJS 模块;
33
33
- 可以选择在编译之前检验你的源代码;
34
34
- 将 Jade 模版转换为纯 HTML 并且嵌入 Javascript 字符串中;
35
- - 将 SASS 文件转换为纯 CSS,then convert it into a JavaScript snippet that insert the resulting CSS as a ` <style> ` tag;
35
+ - 将 SASS 文件转换为纯 CSS,然后将其转换成 JavaScript 片段,将生成的 CSS 作为 ` <style> ` 标签插入页面;
36
36
- 处理 HTML 或者 CSS 中引用的图片,移动到配置的路径中,并且使用 md5 hash 重命名。
37
37
38
- 当你理解 Webpack 原理后会感觉它是如此强大,它可以大大优化你的前端工作流程。它主要的缺点是配置复杂麻烦,但是使用本指南, Vue.js 和 ` vue-loader ` 使用时的常见问题,应该可以帮助你找到解决方案 。
38
+ 当你理解 Webpack 原理后会感觉它是如此强大,它可以大大优化你的前端工作流程。它主要的缺点是配置复杂麻烦,但是使用本指南,应该可以帮助你找到 Vue.js 和 ` vue-loader ` 使用时的最常见问题的解决方案 。
Original file line number Diff line number Diff line change 9
9
- [ 热重载] ( features/hot-reload.md )
10
10
- 配置
11
11
- [ 预处理器] ( configurations/pre-processors.md )
12
- - [ 处理资源路径 ] ( configurations/asset-url.md )
12
+ - [ 资源路径处理 ] ( configurations/asset-url.md )
13
13
- [ 进阶配置] ( configurations/advanced.md )
14
14
- [ 提取 CSS 文件] ( configurations/extract-css.md )
15
15
- [ 自定义块] ( configurations/custom-blocks.md )
16
16
- 工作流程
17
17
- [ 生产环境构建] ( workflow/production.md )
18
18
- [ 代码检验] ( workflow/linting.md )
19
19
- [ 测试] ( workflow/testing.md )
20
- - [ 使用 Mocks 测试] ( workflow/testing-with-mocks.md )
20
+ - [ 使用 Mock 测试] ( workflow/testing-with-mocks.md )
21
21
- [ 选项参考] ( options.md )
Original file line number Diff line number Diff line change 1
1
# Loader 进阶配置
2
2
3
- 有些时候你想要这样 :
3
+ 你有时可能想实现 :
4
4
5
5
1 . 对语言应用自定义 loader string,而不是让 ` vue-loader ` 去推断;
6
6
7
- 2 . 覆盖默认语言的内置配置 。
7
+ 2 . 覆盖默认语言的内置 loader 配置 。
8
8
9
- 3 . 默认语言预处理或者后处理配置 。
9
+ 3 . 使用自定义 loader 预处理或后处理特定语言块 。
10
10
11
- 为了实现这些,详细说明 ` vue-loader ` 的 ` loaders ` 选项:
11
+ 为此,请指定 ` vue-loader ` 的 ` loaders ` 选项:
12
12
13
13
> 注意 ` preLoaders ` 和 ` postLoaders ` 只在版本 >=10.3.0 支持
14
14
18
18
module .exports = {
19
19
// other options...
20
20
module: {
21
- // module.rules is the same as module.loaders in 1.x
21
+ // module.rules 与 1.x中的 module.loaders 相同
22
22
rules: [
23
23
{
24
24
test: / \. vue$ / ,
@@ -45,10 +45,8 @@ module.exports = {
45
45
postLoaders: {
46
46
html: ' babel-loader'
47
47
}
48
-
49
- // `excludedPreLoaders` 的内容是正则表达式
50
- // 你可以用来从 Loader chain 上剔除那些你不需要 vue-loader 处理的 preloader
51
- // 最常用的就是各种 lint
48
+
49
+ // `excludedPreLoaders` 应是正则表达式
52
50
excludedPreLoaders: / (eslint-loader)/
53
51
}
54
52
}
Original file line number Diff line number Diff line change 1
- # 处理资源路径
1
+ # 资源路径处理
2
2
3
- 默认情况下,` vue-loader ` 使用 [ css-loader] ( https://github.com/webpack/css-loader ) 和 Vue 模版编译器自动处理你的样式和模版文件。在处理过程中 ,所有的资源路径例如 ` <img src="..."> ` , ` background: url(...) ` 和 ` @import ` ** 会作为模块依赖** 。
3
+ 默认情况下,` vue-loader ` 使用 [ css-loader] ( https://github.com/webpack/css-loader ) 和 Vue 模版编译器自动处理你的样式和模版文件。在编译过程中 ,所有的资源路径例如 ` <img src="..."> ` , ` background: url(...) ` 和 ` @import ` ** 会作为模块依赖** 。
4
4
5
5
例如,` url(./image.png) ` 会被转换为 ` require('./image.png') ` ,
6
6
14
14
createElement (' img' , { attrs: { src: require (' ../image.png' ) }})
15
15
```
16
16
17
- 因为 ` .png ` 不是一个 JavaScript 文件,你需要配置 Webpack 使用 [ file-loader] ( https://github.com/webpack/file-loader ) 或者 [ url-loader] ( https://github.com/webpack/url-loader ) 去处理它们。脚手器工具 ` vue-cli ` 已经为你配置好了 。
17
+ 因为 ` .png ` 不是一个 JavaScript 文件,你需要配置 Webpack 使用 [ file-loader] ( https://github.com/webpack/file-loader ) 或者 [ url-loader] ( https://github.com/webpack/url-loader ) 去处理它们。` vue-cli ` 脚手器工具已经为你配置好了 。
18
18
19
19
使用它们的好处:
20
20
21
- 1 . ` file-loader ` 允许你指定资源文件的位置,允许使用 hashes 命名以获得长时间的缓存 。此外,这意味着 ** 你可以就近管理你的图片文件,可以使用相对路径而不用担心布署 ** 。使用正确的配置,Webpack 将会在输出中自动重写为正常的文件路径 。
21
+ 1 . ` file-loader ` 可以指定要复制和放置资源文件的位置,以及如何使用版本哈希命名以获得更好的缓存 。此外,这意味着 ** 你可以就近管理你的图片文件,可以使用相对路径而不用担心布署时URL问题 ** 。使用正确的配置,Webpack 将会在打包输出中自动重写文件路径为正确的URL 。
22
22
23
- 2 . ` url-loader ` 允许你设置转换为内联 base64 的文件最小值 ,这会减少小文件的 HTTP 请求。如果文件大于设置值 ,会自动的交给 ` file-loader ` 处理。
23
+ 2 . ` url-loader ` 允许你有条件将文件转换为内联的 base-64 URL(当文件小于给定的阈值) ,这会减少小文件的 HTTP 请求。如果文件大于该阈值 ,会自动的交给 ` file-loader ` 处理。
Original file line number Diff line number Diff line change 2
2
3
3
> 在大于 10.2.0 中支持
4
4
5
- 在 ` .vue ` 文件中,你可以自定义语言块。自定义块将会被 ` vue-loader ` 选项 ` loaders ` 中指定的 loaders 处理,然后被组件模块依赖。配置类似 [ Loader 进阶配置] ( ../configurations/advanced.md ) ,除了匹配使用的是标签名称 ,而不是 ` lang ` 属性。
5
+ 在 ` .vue ` 文件中,你可以自定义语言块。自定义块的内容将由 ` vue-loader ` 的 options 中的 ` loader ` 对象中指定的 loader 处理,然后被组件模块依赖。类似 [ Loader 进阶配置] ( ../configurations/advanced.md ) 中的配置,但使用的是标签名匹配 ,而不是 ` lang ` 属性。
6
6
7
- 如果 loader 匹配到自定义块,它会被处理;其它情况会被忽略。
7
+ 如果找到一个自定义块的 matching loader,该自定义块将被处理; 否则自定义块将被忽略。
8
+ 另外,如果找到的 loader 返回一个函数,该函数将以 ` * .vue ` 文件的组件作为参数来调用。
8
9
9
10
## 例子
10
11
11
- 这个例子是提取自定义块 ` <docs> ` 的内容到单个 docs 文件中 :
12
+ 这是提取自定义块 ` <docs> ` 的内容到单个 docs 文件中的例子 :
12
13
13
14
#### component.vue
14
15
Original file line number Diff line number Diff line change 1
1
# 提取 CSS 到单个文件
2
2
3
- 提取所有 Vue 组件中的 CSS 到单个文件的例子:
4
-
5
- ### Webpack 2.x
6
-
7
3
``` bash
8
4
npm install extract-text-webpack-plugin --save-dev
9
5
```
10
6
7
+ ## 简单的方法
8
+
9
+ > requires vue-loader@^12.0.0 and webpack@^2.0.0
10
+
11
+ ``` js
12
+ // webpack.config.js
13
+ var ExtractTextPlugin = require (" extract-text-webpack-plugin" )
14
+
15
+ module .exports = {
16
+ // other options...
17
+ module: {
18
+ rules: [
19
+ {
20
+ test: / \. vue$ / ,
21
+ loader: ' vue-loader' ,
22
+ options: {
23
+ extractCSS: true
24
+ }
25
+ }
26
+ ]
27
+ },
28
+ plugins: [
29
+ new ExtractTextPlugin (" style.css" )
30
+ ]
31
+ }
32
+ ```
33
+
34
+ 上述内容将自动处理 ` *.vue ` 文件内的 ` <style> ` 提取,并与大多数预处理器一样开箱即用。
35
+
36
+ 注意这只是提取 ` *.vue ` 文件 - 但在 JavaScript 中导入的 CSS 仍然需要单独配置。
37
+
38
+ ## 手动配置
39
+
40
+ 将所有 Vue 组件中的所有已处理的 CSS 提取为单个 CSS 文件配置示例:
41
+
42
+ ### Webpack 2.x
43
+
44
+
11
45
``` js
12
46
// webpack.config.js
13
47
var ExtractTextPlugin = require (" extract-text-webpack-plugin" )
@@ -23,7 +57,7 @@ module.exports = {
23
57
loaders: {
24
58
css: ExtractTextPlugin .extract ({
25
59
use: ' css-loader' ,
26
- fallback: ' vue-style-loader' // <- this is a dep of vue-loader, so no need to explicitly install if using npm3
60
+ fallback: ' vue-style-loader' // <- 这是vue-loader的依赖,所以如果使用npm3,则不需要显式安装
27
61
})
28
62
}
29
63
}
@@ -59,7 +93,7 @@ module.exports = {
59
93
vue: {
60
94
loaders: {
61
95
css: ExtractTextPlugin .extract (" css" ),
62
- // you can also include <style lang="less"> or other langauges
96
+ // 你还可以引入 <style lang="less"> 或其它语言
63
97
less: ExtractTextPlugin .extract (" css!less" )
64
98
}
65
99
},
Original file line number Diff line number Diff line change 19
19
</style >
20
20
```
21
21
22
- 这将为 ` css-loader ` 打开 CSS 模块模式,生成的 CSS 对象将为组件注入一个名叫 ` $style ` 的计算属性,你可以在你的模块中使用动态绑定 :
22
+ 这将为 ` css-loader ` 打开 CSS 模块模式,生成的 CSS 对象将为组件注入一个名叫 ` $style ` 的计算属性,你可以在你的模块中使用动态 class 绑定 :
23
23
24
24
``` html
25
25
<template >
29
29
</template >
30
30
```
31
31
32
- 由于它是一个计算属性,它也与 ` : class` 的 object/array 语法一起使用 :
32
+ 由于它是一个计算属性,它也适用于 ` : class` 的 object/array 语法 :
33
33
34
34
``` html
35
35
<template >
Original file line number Diff line number Diff line change 1
1
# ES2015
2
2
3
- 当项目中配置了 ` babel-loader ` 或者 ` buble-loader ` ,` vue-loader ` 会使用他们处理所有 ` .vue ` 文件中的 ` <script> ` 部分,允许我们在 Vue 组件中使用 ES2015,如果你还没有使用 ES2015,你应该使用它,下面是一些好的学习资源 :
3
+ 当项目中配置了 ` babel-loader ` 或者 ` buble-loader ` ,` vue-loader ` 会使用他们处理所有 ` .vue ` 文件中的 ` <script> ` 部分,允许我们在 Vue 组件中使用 ES2015,如果你还没有使用 ES2015,你应该使用它,这有一些不错的学习资源 :
4
4
5
5
- [ Babel - Learn ES2015] ( https://babeljs.io/docs/learn-es2015/ )
6
6
- [ ES6 Features] ( https://github.com/lukehoban/es6features )
@@ -54,12 +54,12 @@ export default {
54
54
</my-component >
55
55
```
56
56
57
- 你还可以使用[ ` buble ` 选项] ( ../ options.md# buble) 自定义模板中支持的功能。
57
+ 你还可以使用 [ ` buble ` 选项] ( ../options.md# buble ) 自定义模板中支持的功能。
58
58
59
59
### 转换普通 ` .js ` 文件
60
60
61
- 由于 ` vue-loader ` 只处理 ` .vue ` 文件,你需要告诉 Webpack 如何使用 ` babel-loader ` 或者 ` buble-loader ` 处理普通 ` .js ` 文件,在 Webpack 中配置 ` babel-loader ` 或者 ` buble-loader ` 。脚手架工具 ` vue-cli ` 已经为你做了这些。
61
+ 由于 ` vue-loader ` 只处理 ` .vue ` 文件,你需要告诉 Webpack 如何使用 ` babel-loader ` 或者 ` buble-loader ` 处理普通 ` .js ` 文件,在 Webpack 中配置 ` babel-loader ` 或者 ` buble-loader ` 。脚手架工具 ` vue-cli ` 已经为你做了这些。
62
62
63
63
### 使用 ` .babelrc ` 配置 Babel
64
64
65
- ` babel-loader ` 遵守 [ ` .babelrc ` ] ( https://babeljs.io/docs/usage/babelrc/ ) ,因此这是推荐配置 Babel presets 和插件的方法 。
65
+ ` babel-loader ` 遵守 [ ` .babelrc ` ] ( https://babeljs.io/docs/usage/babelrc/ ) ,因此这是配置 Babel presets 和插件推荐的方法 。
Original file line number Diff line number Diff line change 1
1
# 热重载
2
2
3
- "热重载"不是当你修改文件的时候简单重新加载页面。启用热重载后,当你修改 ` .vue ` 文件时,所有该组件的实例会被替换,** 并且不需要刷新页面** 。它甚至保持应用程序和修改组件的当前状态 !当你调整模版或者修改样式时,这极大的提高了开发体验。
3
+ "热重载"不是当你修改文件的时候简单重新加载页面。启用热重载后,当你修改 ` .vue ` 文件时,所有该组件的实例会被替换,** 并且不需要刷新页面** 。它甚至保持应用程序和被替换组件的当前状态 !当你调整模版或者修改样式时,这极大的提高了开发体验。
4
4
5
5
![ hot-reload] ( http://blog.evanyou.me/images/vue-hot.gif )
6
6
7
- 当使用脚手架工具 ` vue-cli ` 时,热重载是开箱即用的。
7
+ 当使用脚手架工具 ` vue-cli ` 时,热重载是开箱即用的。
Original file line number Diff line number Diff line change 10
10
- ` .postcssrc `
11
11
- ` package.json ` 中的 ` postcss `
12
12
13
- 使用配置文件允许一份配置用于处理普通 CSS 文件(通过 ` postcss-loader ` ),和 ` .vue ` 文件内的 CSS,这是推荐做法 。
13
+ 使用配置文件允许你在由 ` postcss-loader ` 处理的普通CSS文件和 ` * .vue` 文件中的 CSS 之间共享相同的配置,这是推荐的做法 。
14
14
15
15
## 内联选项
16
16
@@ -54,9 +54,9 @@ module.exports = {
54
54
55
55
除了插件数组之外,` postcss ` 配置选项也接受:
56
56
57
- - 一个返回插件数组的函数 ;
57
+ - 返回插件数组的函数 ;
58
58
59
- - 一个对象包含配置选项,传递给 PostCSS 处理器。这在使用自定义 parser/stringifiers 时非常有用:
59
+ - 要传递给 PostCSS 处理器的包含 options 的对象。当你使用的 PostCSS 项目依赖自定义 ` parser/stringifiers ` 时,这很有用:
60
60
61
61
``` js
62
62
postcss: {
Original file line number Diff line number Diff line change 42
42
</style >
43
43
```
44
44
45
- 2 . 子组件的根节点将同时受父组件作用域和子组件作用域的影响 。
45
+ 2 . 子组件的根节点将同时受父组件和子组件作用域 CSS 的影响 。
46
46
47
- 3 . 部分元素不受作用域影响部分 。
47
+ 3 . Partials 不受作用域样式影响 。
48
48
49
- 4 . ** CSS 作用域不能代C替 classes** 。考虑到浏览器渲染各种 CSS 选择器的方式,` p { color: red } ` 在作用域中会慢很多(即转换为属性选择器) 。如果你使用 classes 或者 ids 代替,比如 ` .example { color: red } ` ,这样几乎没有性能影响。[ Here's a playground] ( http://stevesouders.com/efws/css-selectors/csscreate.php ) 你可以测试它们的不同。
49
+ 4 . ** CSS 作用域不能代替 classes** 。考虑到浏览器渲染各种 CSS 选择器的方式,当使用 scoped 时, ` p { color: red } ` 在作用域中会慢很多倍(即当与属性选择器组合时) 。如果你使用 classes 或者 ids 代替,比如 ` .example { color: red } ` ,这样几乎没有性能影响。[ Here's a playground] ( http://stevesouders.com/efws/css-selectors/csscreate.php ) 你可以测试它们的不同。
50
50
51
51
5 . ** 在递归组件中小心使用后代选择器!** 对于带有选择器 ` .a .b ` 的CSS 规则,如果元素 ` .a ` 包含递归子组件,所有的子组件中的 ` .b ` 会被匹配。
52
-
You can’t perform that action at this time.
0 commit comments