File tree Expand file tree Collapse file tree 17 files changed +190
-100
lines changed
Expand file tree Collapse file tree 17 files changed +190
-100
lines changed Original file line number Diff line number Diff line change 2727
2828一个基本的例子,想像我们有一些 CommonJS 模块,它不能直接在浏览器中运行,所以我们需要打包成一个文件,这样就可以通过` <script> ` 标签加载。Webpack 可以遵循 ` require() ` 调用的依赖关系,为我们完成这些工作。
2929
30- 但是 Webpack 可以做的不止这些。使用 "loaders",我们可以配置 Webpack 以任何方式去转换所有类型的文件。一些例子包括 :
30+ 但是 Webpack 可以做的不止这些。使用 "loaders",我们可以配置 Webpack 以任何方式去转换所有类型的文件。包括以下例子 :
3131
32- - 转换 ES2015, CoffeeScript 或者 TypeScript 模块为普通的 ES5 CommonJS 模块;
32+ - 转换 ES2015, CoffeeScript 或者 TypeScript 模块为普通的 ES5 CommonJS 模块;
3333- 可以选择在编译之前检验你的源代码;
3434- 将 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> ` 标签插入页面;
3636- 处理 HTML 或者 CSS 中引用的图片,移动到配置的路径中,并且使用 md5 hash 重命名。
3737
38- 当你理解 Webpack 原理后会感觉它是如此强大,它可以大大优化你的前端工作流程。它主要的缺点是配置复杂麻烦,但是使用本指南, Vue.js 和 ` vue-loader ` 使用时的常见问题,应该可以帮助你找到解决方案 。
38+ 当你理解 Webpack 原理后会感觉它是如此强大,它可以大大优化你的前端工作流程。它主要的缺点是配置复杂麻烦,但是使用本指南,应该可以帮助你找到 Vue.js 和 ` vue-loader ` 使用时的最常见问题的解决方案 。
Original file line number Diff line number Diff line change 99 - [ 热重载] ( features/hot-reload.md )
1010- 配置
1111 - [ 预处理器] ( configurations/pre-processors.md )
12- - [ 处理资源路径 ] ( configurations/asset-url.md )
12+ - [ 资源路径处理 ] ( configurations/asset-url.md )
1313 - [ 进阶配置] ( configurations/advanced.md )
1414 - [ 提取 CSS 文件] ( configurations/extract-css.md )
1515 - [ 自定义块] ( configurations/custom-blocks.md )
1616- 工作流程
1717 - [ 生产环境构建] ( workflow/production.md )
1818 - [ 代码检验] ( workflow/linting.md )
1919 - [ 测试] ( workflow/testing.md )
20- - [ 使用 Mocks 测试] ( workflow/testing-with-mocks.md )
20+ - [ 使用 Mock 测试] ( workflow/testing-with-mocks.md )
2121- [ 选项参考] ( options.md )
Original file line number Diff line number Diff line change 11# Loader 进阶配置
22
3- 有些时候你想要这样 :
3+ 你有时可能想实现 :
44
551 . 对语言应用自定义 loader string,而不是让 ` vue-loader ` 去推断;
66
7- 2 . 覆盖默认语言的内置配置 。
7+ 2 . 覆盖默认语言的内置 loader 配置 。
88
9- 3 . 默认语言预处理或者后处理配置 。
9+ 3 . 使用自定义 loader 预处理或后处理特定语言块 。
1010
11- 为了实现这些,详细说明 ` vue-loader ` 的 ` loaders ` 选项:
11+ 为此,请指定 ` vue-loader ` 的 ` loaders ` 选项:
1212
1313> 注意 ` preLoaders ` 和 ` postLoaders ` 只在版本 >=10.3.0 支持
1414
1818module .exports = {
1919 // other options...
2020 module: {
21- // module.rules is the same as module.loaders in 1.x
21+ // module.rules 与 1.x中的 module.loaders 相同
2222 rules: [
2323 {
2424 test: / \. vue$ / ,
@@ -45,10 +45,8 @@ module.exports = {
4545 postLoaders: {
4646 html: ' babel-loader'
4747 }
48-
49- // `excludedPreLoaders` 的内容是正则表达式
50- // 你可以用来从 Loader chain 上剔除那些你不需要 vue-loader 处理的 preloader
51- // 最常用的就是各种 lint
48+
49+ // `excludedPreLoaders` 应是正则表达式
5250 excludedPreLoaders: / (eslint-loader)/
5351 }
5452 }
Original file line number Diff line number Diff line change 1- # 处理资源路径
1+ # 资源路径处理
22
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 ` ** 会作为模块依赖** 。
44
55例如,` url(./image.png) ` 会被转换为 ` require('./image.png') ` ,
66
1414createElement (' img' , { attrs: { src: require (' ../image.png' ) }})
1515```
1616
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 ` 脚手器工具已经为你配置好了 。
1818
1919使用它们的好处:
2020
21- 1 . ` file-loader ` 允许你指定资源文件的位置,允许使用 hashes 命名以获得长时间的缓存 。此外,这意味着 ** 你可以就近管理你的图片文件,可以使用相对路径而不用担心布署 ** 。使用正确的配置,Webpack 将会在输出中自动重写为正常的文件路径 。
21+ 1 . ` file-loader ` 可以指定要复制和放置资源文件的位置,以及如何使用版本哈希命名以获得更好的缓存 。此外,这意味着 ** 你可以就近管理你的图片文件,可以使用相对路径而不用担心布署时URL问题 ** 。使用正确的配置,Webpack 将会在打包输出中自动重写文件路径为正确的URL 。
2222
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 22
33> 在大于 10.2.0 中支持
44
5- 在 ` .vue ` 文件中,你可以自定义语言块。自定义块将会被 ` vue-loader ` 选项 ` loaders ` 中指定的 loaders 处理,然后被组件模块依赖。配置类似 [ Loader 进阶配置] ( ../configurations/advanced.md ) ,除了匹配使用的是标签名称 ,而不是 ` lang ` 属性。
5+ 在 ` .vue ` 文件中,你可以自定义语言块。自定义块的内容将由 ` vue-loader ` 的 options 中的 ` loader ` 对象中指定的 loader 处理,然后被组件模块依赖。类似 [ Loader 进阶配置] ( ../configurations/advanced.md ) 中的配置,但使用的是标签名匹配 ,而不是 ` lang ` 属性。
66
7- 如果 loader 匹配到自定义块,它会被处理;其它情况会被忽略。
7+ 如果找到一个自定义块的 matching loader,该自定义块将被处理; 否则自定义块将被忽略。
8+ 另外,如果找到的 loader 返回一个函数,该函数将以 ` * .vue ` 文件的组件作为参数来调用。
89
910## 例子
1011
11- 这个例子是提取自定义块 ` <docs> ` 的内容到单个 docs 文件中 :
12+ 这是提取自定义块 ` <docs> ` 的内容到单个 docs 文件中的例子 :
1213
1314#### component.vue
1415
Original file line number Diff line number Diff line change 11# 提取 CSS 到单个文件
22
3- 提取所有 Vue 组件中的 CSS 到单个文件的例子:
4-
5- ### Webpack 2.x
6-
73``` bash
84npm install extract-text-webpack-plugin --save-dev
95```
106
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+
1145``` js
1246// webpack.config.js
1347var ExtractTextPlugin = require (" extract-text-webpack-plugin" )
@@ -23,7 +57,7 @@ module.exports = {
2357 loaders: {
2458 css: ExtractTextPlugin .extract ({
2559 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,则不需要显式安装
2761 })
2862 }
2963 }
@@ -59,7 +93,7 @@ module.exports = {
5993 vue: {
6094 loaders: {
6195 css: ExtractTextPlugin .extract (" css" ),
62- // you can also include <style lang="less"> or other langauges
96+ // 你还可以引入 <style lang="less"> 或其它语言
6397 less: ExtractTextPlugin .extract (" css!less" )
6498 }
6599 },
Original file line number Diff line number Diff line change 1919 </style >
2020```
2121
22- 这将为 ` css-loader ` 打开 CSS 模块模式,生成的 CSS 对象将为组件注入一个名叫 ` $style ` 的计算属性,你可以在你的模块中使用动态绑定 :
22+ 这将为 ` css-loader ` 打开 CSS 模块模式,生成的 CSS 对象将为组件注入一个名叫 ` $style ` 的计算属性,你可以在你的模块中使用动态 class 绑定 :
2323
2424``` html
2525<template >
2929</template >
3030```
3131
32- 由于它是一个计算属性,它也与 ` : class` 的 object/array 语法一起使用 :
32+ 由于它是一个计算属性,它也适用于 ` : class` 的 object/array 语法 :
3333
3434``` html
3535<template >
Original file line number Diff line number Diff line change 11# ES2015
22
3- 当项目中配置了 ` babel-loader ` 或者 ` buble-loader ` ,` vue-loader ` 会使用他们处理所有 ` .vue ` 文件中的 ` <script> ` 部分,允许我们在 Vue 组件中使用 ES2015,如果你还没有使用 ES2015,你应该使用它,下面是一些好的学习资源 :
3+ 当项目中配置了 ` babel-loader ` 或者 ` buble-loader ` ,` vue-loader ` 会使用他们处理所有 ` .vue ` 文件中的 ` <script> ` 部分,允许我们在 Vue 组件中使用 ES2015,如果你还没有使用 ES2015,你应该使用它,这有一些不错的学习资源 :
44
55- [ Babel - Learn ES2015] ( https://babeljs.io/docs/learn-es2015/ )
66- [ ES6 Features] ( https://github.com/lukehoban/es6features )
@@ -54,12 +54,12 @@ export default {
5454</my-component >
5555```
5656
57- 你还可以使用[ ` buble ` 选项] ( ../ options.md# buble) 自定义模板中支持的功能。
57+ 你还可以使用 [ ` buble ` 选项] ( ../options.md# buble ) 自定义模板中支持的功能。
5858
5959### 转换普通 ` .js ` 文件
6060
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 ` 已经为你做了这些。
6262
6363### 使用 ` .babelrc ` 配置 Babel
6464
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 11# 热重载
22
3- "热重载"不是当你修改文件的时候简单重新加载页面。启用热重载后,当你修改 ` .vue ` 文件时,所有该组件的实例会被替换,** 并且不需要刷新页面** 。它甚至保持应用程序和修改组件的当前状态 !当你调整模版或者修改样式时,这极大的提高了开发体验。
3+ "热重载"不是当你修改文件的时候简单重新加载页面。启用热重载后,当你修改 ` .vue ` 文件时,所有该组件的实例会被替换,** 并且不需要刷新页面** 。它甚至保持应用程序和被替换组件的当前状态 !当你调整模版或者修改样式时,这极大的提高了开发体验。
44
55![ hot-reload] ( http://blog.evanyou.me/images/vue-hot.gif )
66
7- 当使用脚手架工具 ` vue-cli ` 时,热重载是开箱即用的。
7+ 当使用脚手架工具 ` vue-cli ` 时,热重载是开箱即用的。
Original file line number Diff line number Diff line change 1010- ` .postcssrc `
1111- ` package.json ` 中的 ` postcss `
1212
13- 使用配置文件允许一份配置用于处理普通 CSS 文件(通过 ` postcss-loader ` ),和 ` .vue ` 文件内的 CSS,这是推荐做法 。
13+ 使用配置文件允许你在由 ` postcss-loader ` 处理的普通CSS文件和 ` * .vue` 文件中的 CSS 之间共享相同的配置,这是推荐的做法 。
1414
1515## 内联选项
1616
@@ -54,9 +54,9 @@ module.exports = {
5454
5555除了插件数组之外,` postcss ` 配置选项也接受:
5656
57- - 一个返回插件数组的函数 ;
57+ - 返回插件数组的函数 ;
5858
59- - 一个对象包含配置选项,传递给 PostCSS 处理器。这在使用自定义 parser/stringifiers 时非常有用:
59+ - 要传递给 PostCSS 处理器的包含 options 的对象。当你使用的 PostCSS 项目依赖自定义 ` parser/stringifiers ` 时,这很有用:
6060
6161 ``` js
6262 postcss: {
You can’t perform that action at this time.
0 commit comments