Key "use" nas regras do webpack.config.js | Webpack: Manipulando módulos na sua webapp

1
resposta

por Gabriel Alexsandro

| 34.2k xp | 1 posts

Boa noite! Reparei que para indicar o a regra de processamento do babel-loader, foi feito da seguinte maneira:

use: {
                    loader: 'babel-loader'
      }

Porém, ao inserir a regra para o css/style-loader, o nome do loader é inserido diretamente:

loader: 'style-loader!css-loader'

e que se eu colocar esses loaders dentro de um bloco use como foi feito no caso do babel, obtenho o erro "Module not found: Error: Can't resolve 'style-loader!css-loader". Por que em algumas regras pode ser utilizado o use, e em outros não?

Obs: Estou utilizando Windows

1 resposta

por Laís Cavalcanti

| 2576.8k xp | 4815 posts

Instrutor

18/05/2020

Oi, Gabriel, tudo bem?

O uso do use cria uma nova especificação dentro de uma nova regra, assim, você pode usar o use para indicar qual carregador deve ser usado para fazer a transformação, nesse você está indicando loader: 'babel-loader', já o test identifica qual arquivo ou arquivos devem ser transformados.

Segundo a documentação, https://webpack.js.org/concepts/loaders/

um exemplo retirado da documentação:

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/i,
        use: ['style-loader', 'css-loader'],
      },
    ],
  },
};

no exemplo, que utiliza a mesma regra que a da aula, é utilizando o use. Acredito somente que na segunda regra o professor omitiu seu uso.

Espero ter te ajudado!