From 8e62053be51cb49790d877caf7ae2d95b1974a7e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ant=C3=A9rio=20vieira=20da=20silva?=
 <anteriovieira@gmail.com>
Date: Mon, 13 Feb 2017 23:21:13 -0200
Subject: [PATCH] Minor fixes and updates

---
 docs/pt/README.md                       | 25 +++----
 docs/pt/SUMMARY.md                      | 42 +++++------
 docs/pt/configurations/advanced.md      | 79 +++++++++++++-------
 docs/pt/configurations/asset-url.md     |  2 +-
 docs/pt/configurations/custom-blocks.md | 67 +++++++++++++++++
 docs/pt/options.md                      | 95 ++++++++++++++++---------
 6 files changed, 217 insertions(+), 93 deletions(-)
 create mode 100644 docs/pt/configurations/custom-blocks.md

diff --git a/docs/pt/README.md b/docs/pt/README.md
index 44b29a666..c3fe2470d 100644
--- a/docs/pt/README.md
+++ b/docs/pt/README.md
@@ -6,13 +6,14 @@
 
 ![screenshot](http://blog.evanyou.me/images/vue-component.png)
 
-Existem muitas características interessantes fornecidos por `vue-loader`:
+Existem muitos recursos interessantes fornecidos por `vue-loader`:
 
-* ES2015 habilitado por padrão;
-* Permite usar outros carregadores Webpack para cada pedaço de um componente Vue, por exemplo SASS para `<style>` e Jade para `<template>`;
-* Trata ativos estáticos referenciado em `<style>` e `<template>` como dependência de módulo e então manipula com carregadores Webpack;
-* Pode simular escopo CSS para cada componente;
-* Suporta componente hot-reloading durante desenvolvimento;
+- ES2015 habilitado por padrão;
+- Permite usar outros carregadores Webpack para cada pedaço de um componente Vue, por exemplo SASS para `<style>` e Jade para `<template>`;
+- Permite seções customizadas em um arquivo .vue que pode ter carregadores encadeados personalizados aplicados a eles;
+- Trata ativos estáticos referenciado em `<style>` e `<template>` como dependência de módulo e então manipula com carregadores Webpack;
+- Pode simular escopo CSS para cada componente;
+- Suporta componente hot-reloading durante desenvolvimento;
 
 Em poucas palavras, a combinação de Webpack e `vue-loader` dá-lhe um moderno, flexível e extremamente poderoso fluxo de trabalho front-end para criação de aplicações Vue.js.
 
@@ -20,7 +21,7 @@ Em poucas palavras, a combinação de Webpack e `vue-loader` dá-lhe um moderno,
 
 Se você já está familiarizado com Webpack, sinta-se livre para pular está explicação. Mas para aqueles de vocês que são novos com Webpack, aqui está uma pequena introdução:
 
-[Webpack](http://webpack.github.io/) é um empacotador de módulo. Ele carrega um grupo de arquivos tratando cada um como um módulo, descobrindo as dependências entre eles e empacotando em ativos estáticos prontos para implantação.
+[Webpack](http://webpack.github.io/) é um empacotador de módulo. Ele pega um grupo de arquivos, trata cada um como um módulo, descobre as dependências entre eles e empacota em ativos estáticos prontos para implantação.
 
 ![webpack](http://webpack.github.io/assets/what-is-webpack.png)
 
@@ -28,10 +29,10 @@ Para um exemplo básico, imagine que nós temos um monte de módulos CommonJs. E
 
 Mas Webpack pode fazer mais do que isso. Com "carregadores", podemos ensinar Webpack a transformar todos os tipos de arquivos dá maneira que quisermos antes da saída final do pacote. Alguns exemplos incluem:
 
-* Transpilar módulos ES2015, CoffeScript ou TypeScript em módulos simples CommonJs ES5;
-* Opcionalmente você pode canalizar o código fonte através de um linter \(analisador de código\) antes de fazer a compilação;
-* Transpilar modelos Jade em HTML simples em seguida colocao-o como uma sequência de string JavaScript;
-* Traspilar arquivos SASS em CSS simples, em seguida os converte em trechos de código JavaScript que insere o resultado CSS como uma tag `<style>`;
-* Processar um arquivo de imagem referenciado em HTML ou CSS, movê-la para o destino desejado baseado no arquivo de configuração, e nomeá-la usando seu hash md5; 
+- Transpilar módulos ES2015, CoffeScript ou TypeScript em módulos simples CommonJs ES5;
+- Opcionalmente você pode canalizar o código fonte através de um linter \(analisador de código\) antes de fazer a compilação;
+- Transpilar modelos Jade em HTML simples em seguida colocá-lo como uma sequência de string JavaScript;
+- Traspilar arquivos SASS em CSS simples, em seguida os converte em trechos de código JavaScript que insere o resultado CSS como uma tag `<style>`;
+- Processar um arquivo de imagem referenciado em HTML ou CSS, movê-la para o destino desejado baseado no arquivo de configuração, e nomeá-la usando seu hash md5; 
 
 Webpack é tão poderoso que quando você entender como ele funciona, poderá melhorar drasticamente seu fluxo de trabalho front-end. Sua principal desvantagem é a configuração excessiva e complexa; Mas com este guia você deve se capaz de encontrar solução para muitas questões comuns usando Webpack com Vue.js e `Vue-loader`.
\ No newline at end of file
diff --git a/docs/pt/SUMMARY.md b/docs/pt/SUMMARY.md
index 3d4684033..669657654 100644
--- a/docs/pt/SUMMARY.md
+++ b/docs/pt/SUMMARY.md
@@ -1,20 +1,22 @@
-* Começando
-  * [Especificação do Vue Component](start/spec.md)
-  * [Configurando um projeto](start/setup.md)
-* Características
-  * [ES2015](features/es2015.md)
-  * [CSS com Escopo](features/scoped-css.md)
-  * [Módulos CSS](features/css-modules.md)
-  * [PostCSS](features/postcss.md)
-  * [Hot Reload](features/hot-reload.md)
-* Configurações
-  * [Pré-Processadores](configurations/pre-processors.md)
-  * [Manipulação de URls de ativos](configurations/asset-url.md)
-  * [Configuração avançado do loader](configurations/advanced.md)
-  * [Extraindo arquivos css](configurations/extract-css.md)
-* Fluxo de trabalho
-  * [Produção](workflow/production.md)
-  * [Análise estática do código \(Linting\)](workflow/linting.md)
-  * [Testando](workflow/testing.md)
-  * [Testando com Mocks](workflow/testing-with-mocks.md)
-* [Referência de opções](options.md)
\ No newline at end of file
+- [Introdução](README.md)
+- Começando
+  - [Especificação do Vue Component](start/spec.md)
+  - [Configurando um projeto](start/setup.md)
+- Características
+  - [ES2015](features/es2015.md)
+  - [CSS com Escopo](features/scoped-css.md)
+  - [Módulos CSS](features/css-modules.md)
+  - [PostCSS](features/postcss.md)
+  - [Hot Reload](features/hot-reload.md)
+- Configurações
+  - [Pré-Processadores](configurations/pre-processors.md)
+  - [Manipulação de URls de ativos](configurations/asset-url.md)
+  - [Configuração avançado do loader](configurations/advanced.md)
+  - [Extraindo arquivos css](configurations/extract-css.md)
+  - [Blocos customizados](configurations/custom-blocks.md)
+- Fluxo de trabalho
+  - [Produção](workflow/production.md)
+  - [Análise estática do código \(Linting\)](workflow/linting.md)
+  - [Testando](workflow/testing.md)
+  - [Testando com Mocks](workflow/testing-with-mocks.md)
+- [Referência de opções](options.md)
\ No newline at end of file
diff --git a/docs/pt/configurations/advanced.md b/docs/pt/configurations/advanced.md
index 2221ef517..f0730940b 100644
--- a/docs/pt/configurations/advanced.md
+++ b/docs/pt/configurations/advanced.md
@@ -1,54 +1,83 @@
 # Configurações avançadas do carregador
 
-Às vezes você pode querer aplicar um carregador de string a uma linguagem em vez de deixar `vue-loader` responsável. Ou você pode simplesmente querer sobrescrever a configuração embutida do carregador para a linguagem padrão. Para fazer isso, adicione um bloco `vue` em seu arquivo de configuração Webpack, e especifique a opção `loaders`.
+Às vezes você pode querer:
 
-### Webpack 1.x
+1. Aplicar um carregador personalizado de string a uma linguagem em vez de deixar `vue-loader` responsável. 
+
+2. Sobrescrever a configuração embutida do carregador para a linguagem padrão. 
+
+3. Pré-processar ou pós-processar um bloco de linguagem especifico com carregadores personalizado.
+
+Para fazer isto, especifique a opção `loaders` para `vue-loader`:
+
+> Observe que `preLoaders` e`postLoaders` são suportados apenas em verões >=10.3.0
+
+
+
+### Webpack 2.x
 
 ```js
 // webpack.config.js
 module.exports = {
   // outras opções...
   module: {
-    loaders: [
+    // module.rules é o mesmo que module.loaders em 1.x
+    rules : [
       {
         test: /\.vue$/,
-        loader: 'vue'
+        loader: 'vue-loader',
+        options: {
+          // `loaders` substituirá os carregadores padrões.
+          // A configuração a seguir fará com que todas as tags <script> sem 
+          // o atributo "lang" sejam carrega com coffee-loader
+          loaders: {
+            js: 'coffee-loader'
+          },
+          
+          // `preLoaders` são anexados antes dos carregadores padrões
+          // Você pode usar isso para pré-processar blocos de linguagem 
+          // - um caso de uso comum seria i18n em tempo de construção.
+          preLoaders: {
+            js: '/caminho/personalizado/para/carregador'
+          },
+          
+          // `postLoaders` são anexados após os carregadores padrões.
+          // 
+          // - Para `html`, o resultado retornado pelo carregador padrão
+          //   será compilado em código de função de renderização JavaScript.
+          //
+          // - Para `css`, o resultado será retornado por vue-style-loader
+          //   que não é particulamente útil em muitos casos. Usando um plugin
+          //   postcss será uma opção melhor.
+          postLoaders: {
+            html: 'babel-loader'
+          }
+        }
       }
     ]
-  },
-  // configurações vue-loader 
-  vue: {
-    // ... outras opções vue
-    loaders: {
-      // carrega todo <script> sem o atributo "lang" com coffee-loader
-      js: 'coffee',
-      // carrega <template> diretamente como string HTML, 
-      // canalizá-lo atravé de vue-html-loader primeiro
-      html: 'raw'
-    }
   }
 }
 ```
 
-### Webpack 2.x \(^2.1.0-beta.25\)
+### Webpack 1.x
 
 ```js
+// webpack.config.js
 module.exports = {
   // outras opções...
   module: {
-    // module.rules é o mesmo que module.loaders em 1.x
-    rules: [
+    loaders: [
       {
         test: /\.vue$/,
-        loader: 'vue-loader',
-        // opções de vue-loader
-        options: {
-          loaders: {
-            // ...
-          }
-        }
+        loader: 'vue'
       }
     ]
+  },
+  // configurações vue-loader
+  vue: {
+    loaders: {
+      // mesmo que as regras de configurações acima
+    }
   }
 }
 ```
diff --git a/docs/pt/configurations/asset-url.md b/docs/pt/configurations/asset-url.md
index f9a798dc1..2f3c086cc 100644
--- a/docs/pt/configurations/asset-url.md
+++ b/docs/pt/configurations/asset-url.md
@@ -18,6 +18,6 @@ Como `.png` não é um arquivo JavaScript, você precisará configurar o Webpack
 
 Os benefícios de tudo isso são:
 
-1. `file-loader` permite a você configurar onde copiar e colar os arquivos de ativos \(assets\), e como nomeá-lo usando hashes de versão para melhorar o cache. Mas, isso também significa que **você pode simplesmente colocar imagens ao lado de seus arquivos **`.vue`** e usar o caminho relativo com base na estrutura de pastas em vez de se preocupar com URLs de implantação**. Com a configuração apropriada, Webpack irá automaticamente escrever o caminho dos arquivos em URLs corretas na saída empacotada.
+1. `file-loader` permite a você configurar onde copiar e colar os arquivos de ativos \(assets\), e como nomeá-lo usando hashes de versão para melhorar o cache. Mas, isso também significa que **você pode simplesmente colocar imagens ao lado de seus arquivos `.vue` e usar o caminho relativo com base na estrutura de pastas em vez de se preocupar com URLs de implantação**. Com a configuração apropriada, Webpack irá automaticamente escrever o caminho dos arquivos em URLs corretas na saída empacotada.
 
 2. `url-loader` permite a você colocar condicionalmente em linha um arquivo de dados URL base64 se eles forem menor que um determinado limite. Se o arquivo for maior do que o limite ele automaticamente será jogado para `file-loader`.
\ No newline at end of file
diff --git a/docs/pt/configurations/custom-blocks.md b/docs/pt/configurations/custom-blocks.md
new file mode 100644
index 000000000..ab55766a3
--- /dev/null
+++ b/docs/pt/configurations/custom-blocks.md
@@ -0,0 +1,67 @@
+# Blocos customizados
+
+> Requer versão 10.2.0+
+
+Você pode definir um bloco de linguagem customizado dentro de arquivos `*.vue`. O conteúdo do bloco customizado será processado por carregadores especificado na opção `loaders` do objeto de configuração `vue-loader` e então requerido pelo módulo componente. A configuração é semelhante a descrita em [Configurações Avançada do Carregador](../configurations/advanced.md). exceto o uso padrão do nome da tag em vez do atributo `lang`;
+
+Se for encontrado um carregador correspondente para um bloco customizado, ele será processado. Caso contrário o bloco customizado será simplesmente ignorado.
+
+## Exemplo
+
+Aqui está um exemplo de extração de todos os blocos customizados `<docs>` em um único arquivo docs;
+
+#### componente.vue
+
+``` html
+<docs>
+  ## Isto é um componente de exemplo.
+</docs>
+
+<template>
+  <h2 class="red">{{msg}}</h2>
+</template>
+
+<script>
+export default {
+  data () {
+    return {
+      msg: 'Olá do Componente A!'
+    }
+  }
+}
+</script>
+
+<style>
+comp-a h2 {
+  color: #f00;
+}
+</style>
+```
+
+#### webpack.config.js
+
+``` js
+// Webpack 2.x
+var ExtractTextPlugin = require("extract-text-webpack-plugin")
+
+module.exports = {
+  module: {
+    rules: [
+      {
+        test: /\.vue$/,
+        loader: 'vue',
+        options: {
+          loaders: {
+            // extrai todo conteúdo de <docs> em texto bruto
+            'docs': ExtractTextPlugin.extract('raw-loader'),
+          }
+        }
+      }
+    ],
+    plugins: [
+      // saída de todos os docs em um único arquivo
+      new ExtractTextPlugin('docs.md')
+    ]
+  }
+}
+```
diff --git a/docs/pt/options.md b/docs/pt/options.md
index 8ba51605e..3b78b95ce 100644
--- a/docs/pt/options.md
+++ b/docs/pt/options.md
@@ -1,19 +1,8 @@
-# Opções de Referência
+# Referência de Opções
 
-### Diferença do uso entre Webpack 1 e 2
+## Diferença do uso entre Webpack 1 & 2
 
-Para Webpack 1.x: Adicione um bloco \`vue\` na raiz nas suas configurações Webpack:
-
-```js
-module.exports = {
-  // ...
-  vue: {
-    // vue-loader options
-  }
-}
-```
-
-Para Webpack 2 \(^2.1.0-beta.25\)
+Para Webpack 2: passe as opções diretamente para a regra do carregador.
 
 ```js
 module.exports = {
@@ -24,7 +13,7 @@ module.exports = {
         test: /\.vue$/,
         loader: 'vue-loader',
         options: {
-          // vue-loader options
+          // opções de vue-loader
         }
       }
     ]
@@ -32,11 +21,22 @@ module.exports = {
 }
 ```
 
+Para Webpack 1.x: Adicione um bloco \`vue\` na raiz de suas configurações Webpack:
+
+```js
+module.exports = {
+  // ...
+  vue: {
+    // opções de vue-loader
+  }
+}
+```
+
 ### loaders
 
-* type: `Object`
+* tipo: `{ [lang: string]: string }`
 
-  Um objeto que especifica carregadores de Webpack para usar para blocos de linguagem dentro de arquivos `*.vue`. A chave corresponde ao atributo `lang` para o bloco de linguagem, se especificado. O padrão `lang` para cada tipo é:
+  Um objeto especificando carregadores de Webpack para substituir carregadores padrão usados para blocos de linguagem dentro de arquivos `*.vue`. A chave corresponde ao atributo `lang` para o bloco de linguagem, se especificado. O padrão `lang` para cada tipo é:
 
   * `<template>`: `html`
   * `<script>`:`js`
@@ -44,29 +44,51 @@ module.exports = {
 
   Por exemplo, para usar `babel-loader` e `eslint-loader` para processar todos os blocos `<script>`:
 
-  ```js
-  // ...
-  vue: {
-    loaders: {
-      js: 'babel!eslint'
+```js
+  // Configuração Webpack 2.X
+  module: {
+    rules: {
+      {
+        test: /\.vue$/,
+        loader: 'vue-loader',
+        options: {
+          js: 'babel-loader!eslint-loader'
+        }
+      }
     }
   }
-  ```
+```
+
+### preLoaders
+
+* tipo: `{ [lang: string]: string }`
+* suportado apenas em &gt;=10.3.0
+
+  O formato de configuração é o mesmo que `loaders`, mas `preLoaders` são aplicados depois dos carregadores padrões. Você pode usar isto para pós-processar blocos de linguagem. No entanto observe que isso é um pouco mais complicado:
+  
+  * Para `html`, o resultado retornado pelo carregador padrão será compilado em código de função de renderização JavaScript.
+
+  * Para `css`, o resultado será retornado por `vue-style-loader` que não é particularmente útil na maioria dos casos. Usando um plugin postcss será uma opção melhor.
+
 
 ### postcss
 
-* type: `Array` ou `Function` ou `Object`
-* Formato `Object` suportado apenas em ^8.5.0
+> Nota: em versões &gt;=11.0.0 é recomendável usar um arquivo de configuração PostCSS em vez disso. O uso é o mesmo que [postcss-loader](https://github.com/postcss/postcss-loader#usage).
 
-  Especifica plugins PostCSS customizados para serem aplicado a CSS dentro de arquivos `*.vue`. Se estiver usando uma função, a função irá ser chamada usando o mesmo contexto do loader e deve retornar uma coleção de plugins.
+* tipo: `Array` ou `Function` ou `Object`
+
+  Especifica plugins PostCSS personalizados para serem aplicado a CSS dentro de arquivos `*.vue`. Se estiver usando uma função, a função irá ser chamada usando o mesmo contexto do loader e deve retornar uma coleção de plugins.
 
   ```js
   // ...
-  vue: {
-    // Nota: não alinhe a opção `postcss` sobre `loaders`
-    postcss: [require('postcss-cssnext')()],
-    loaders: {
-      // ...
+  {
+    loader: 'vue-loader',
+    options: {
+      // Nota: não alinhe a opção `postcss` sob `loaders`
+      postcss: [require('postcss-cssnext')()],
+      loaders: {
+        // ...
+      }
     }
   }
   ```
@@ -77,7 +99,7 @@ module.exports = {
   postcss: {
     plugins: [...], // lista de plugins
     options: {
-      parser: sugarss // use o analizador de sugarss
+      parser: sugarss // use o analisador de sugarss
     }
   }
   ```
@@ -89,7 +111,7 @@ module.exports = {
 
   Se deve habilitar mapas de origem para CSS. Desativar isso pode evitar alguns erros relacionado a caminho relativo em `css-loader` e fazer a construção um pouco mais rápida.
 
-  Observe que isso é automaticamente definido para `false` se a opção `devtoo` não estiver presente na configurações principai de Webpack.
+  Observe que isso é automaticamente definido para `false` se a opção `devtoo` não estiver presente na configuração princípai de Webpack.
 
 ### esModule
 
@@ -110,7 +132,7 @@ module.exports = {
 * tipo: `{ [tag: string]: string | Array<string> }`
 * padrão: `{ img: 'src' }`
 
-  Durante a compilação do template, o compilador pode transformar certos atributos, tais como URLs `src`, em chamadas `require`, para que o recurso de destino possa ser manipulado pelo Webpack. A configuração padrão transforma o atributo `src` em tags `<img>`.
+  Durante a compilação do template, o compilador pode transformar certos atributos, tais como URLs `src`, em chamadas `require`, para que o recurso de destino possa ser manipulado pelo Webpack. A configuração padrão transforma o atributo `src` em tags `<img>` e atributos `xlink:href` em tags `<image>` de SVG.
 
 ### buble
 
@@ -154,4 +176,7 @@ module.exports = {
       }
     ]
   }
-  ```
\ No newline at end of file
+  ```
+
+
+