Referência de Opções

Diferença do uso entre webpack 1 & 2

Para webpack 2: passe as opções diretamente para a regra do carregador.

module.exports = {
  // ...
  module: {
    rules: [
      {
        test: /\.vue$/,
        loader: 'vue-loader',
        options: {
          // opções de vue-loader
        }
      }
    ]
  }
}

Para webpack 1.x: Adicione um bloco `vue` na raiz de suas configurações webpack:

module.exports = {
  // ...
  vue: {
    // opções de vue-loader
  }
}

loaders

  • tipo: { [lang: string]: string }

    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
    • <style>: css

    Por exemplo, para usar babel-loader e eslint-loader para processar todos os blocos <script>:

  // 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 >=10.3.0

    O formato de configuração é o mesmo que loaders, mas preLoaders são aplicados aos blocos de linguagem correspodentes antes dos carregadores padrões. Você pode usar isto para pré-processar blocos de linguagem - um caso de uso comum seria contruir em internacionalização (i18n)) tempo real.

postLoaders

  • tipo: { [lang: string]: string }
  • suportado apenas em >= 10.3.0

    O formato de configuração é o mesmo que loaders, mas postLoaders são aplicados depois dos carregadores padrões. Você pode usar para pós-processar blocos de linguagem. No entanto note 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

Nota: em versões >= 11.0.0 é recomendável usar um arquivo de configuração PostCSS em vez disso. O uso é o mesmo que postcss-loader.

  • tipo: Array, 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.

    // ...
    {
      loader: 'vue-loader',
      options: {
        // Nota: não alinhe a opção `postcss` sob `loaders`
        postcss: [require('postcss-cssnext')()],
        loaders: {
          // ...
        }
      }
    }
    

    Está opção também pode ser um objeto que contém opções para ser passada para o processador PostCSS. Isto é útil quando você está usando projetos PostCSS que entrega um parser/stringifiers personalizado:

    postcss: {
      plugins: [...], // lista de plugins
      options: {
        parser: sugarss // use o analisador de sugarss
      }
    }
    

cssSourceMap

  • tipo: Boolean
  • padrão: true

    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ção princípai de webpack.

esModule

  • tipo: Boolean
  • padrão: undefined

    Se deve emitir código compatível esModule. Por padrão vue-loader irá emitir a exportação padrão em formato CommonJs como module.exports = .... Quando esModule estiver definido como true, a exportação padrão irá ser transpilada em exports.__esModule = true; exports = .... Útil para interoperação com transpiladores diferente de Babel, como TypeScript.

preserveWhitespace

  • tipo: Boolean
  • padrão: true

    Se definido para false, os espaços em branco entre as tags HTML em templates serão ignorados.

transformToRequire

  • tipo: { [tag: string]: string | Array<string> }
  • padrão: { img: 'src', image: 'xlink:href' }

    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

  • tipo: Object
  • padrão: {}

    Opções de configuração para o buble-loader (Se estiver presente), E a compilação buble passa para o template as funções de renderização.

    Nota de versão: Na versão 9.x, as expressões do template são configuradas separadamente através da opção templateBudle agora removida.

    A função de renderização do template suporta uma transformação especial stripWith (habilitada por padrão), que remove o with usado em funções de renderização geradas para torná-las compatíveis com modelo estrito.

    Exemplo de configuração:

    // webpack 1
    vue: {
      buble: {
        // ativa o objeto de propagação
        // NOTA: Você precisa fornecer o polyfill Object.assign por si mesmo!
        objectAssign: 'Object.assign',
    
        // desliga a remoção 'with'
        transforms: {
          stripWith: false
        }
      }
    }
    
    // webpack 2
    module: {
      rules: [
        {
          test: /\.vue$/,
          loader: 'vue-loader',
          options: {
            buble: {
              // mesmas opções
            }
          }
        }
      ]
    }
    

results matching ""

    No results matching ""