Entrar Ainda não tem acesso?
Solucionado (ver solução)
Solucionado
(ver solução)
1
resposta

Atividade 10, Aula 3 - Import está correto?

Referente ao curso Webpack: trabalhando com módulos na sua webapp, no capítulo Tratando CSS como módulo e atividade A importação que não rolou

por Matheus Borges Fiorini dos Anjos
| 187.1k xp | 6 posts
Desenvolvedor Júnior

Olá pessoal,

Gostaria de entender porque o './' é utilizado no caminho relativo para buscar pelo dist/css/bootstrap.css.

O correto não seria iniciar o caminho relativo sem o './'?

Li na documentação do Webpack que é recomendado usar a propriedade context no objeto de configuração que é exportado no webpack.config.js (apontando para a pasta da aplicação 'app') e estou usando ela, portanto fiz algumas modificações: 

module.exports = {

    //Context. Explicitamente configura o diretório raiz que o webpack usa como referência para resolver os módulos, em vez do CurrentWorkingDirectory que onde a runtime do node executa
    context: path.resolve(__dirname, 'app'),
    entry: {
        app: './src/js/app.js'
    },
    output:{
        filename: '[name].bundle.js',
        path: path.resolve(__dirname, 'app/dist'),
        clean: true
    },
    module: {
        rules: [
            { test: /\.css$/, use: ['style-loader','css-loader'] }]
    },
    plugins: [
        new HtmlWebpackPlugin(
        {
            template: './src/app.html',
            filename: 'app.html',
            hash: true 
        })
    ]
};

Dessa forma, se eu usar no meu app.js a declaração:

import './bootstrap/dist/css/bootstrap.css';

Ele apresenta um erro desse tipo:

ERROR in ./app/src/js/app.js 2:0-44
Module not found: Error: Can't resolve './bootstrap/dist/css/bootstrap.css' in 'C:\gs\GitHub\webpack\app\src\js'
resolve './bootstrap/dist/css/bootstrap.css' in 'C:\gs\GitHub\webpack\app\src\js'
  using description file: C:\gs\GitHub\webpack\package.json (relative path: ./app/src/js)
    Field 'browser' doesn't contain a valid alias configuration
    using description file: C:\gs\GitHub\webpack\package.json (relative path: ./app/src/js/bootstrap/dist/css/bootstrap.css)
      no extension
      C:\gs\GitHub\webpack\app\src\js\bootstrap\dist\css\bootstrap.css doesn't exist

O correto não seria eu utilizar import 'bootstrap/dist/css/bootstrap.css';? Pois assim o compilador SEMPRE irá reconhecer o caminho como um módulo do node e não um caminho relativo ao CurrentWorkingDirectory. Considero então, como uma boa prática, omitir o uso do './'?

OBS: Fiz um texte omitindo o context e apresenta o mesmo erro, ele busca pelo .css do bootstrap dentro da minha pasta app, sendo que deveria buscar nos módulos do Node. Se eu omitir o ./ ele funciona perfeitamente e encontra o módulo do Bootstrap dentro de node_modules.

1 resposta
solução!
por Lorena Garcia
| 8288.1k xp | 12128 posts
Alura Scuba Team Suporte Educacional

Olá Matheus, tudo bem?

Desculpe a demora em retornar.

É importante destacar que o uso do './' indica que o arquivo deve ser buscado a partir do diretório atual, ou seja, é um caminho relativo ao diretório onde o arquivo que contém a importação está localizado.

No seu código de configuração do Webpack, você definiu o diretório raiz da aplicação como o contexto a ser usado na resolução dos módulos. Dessa forma, o Webpack procura pelos módulos a partir desse diretório raiz, e não mais a partir do diretório atual. Isso significa que, ao importar um arquivo CSS, o caminho relativo deve ser definido a partir desse diretório raiz.

No seu exemplo, ao importar o arquivo './bootstrap/dist/css/bootstrap.css', o Webpack procura por esse arquivo a partir do diretório raiz definido no contexto. Porém, como o arquivo CSS está localizado na pasta node_modules, que não é um subdiretório do diretório raiz definido no contexto, o Webpack não consegue encontrá-lo e apresenta um erro.

Pra resolver esse problema, você pode importar o arquivo CSS sem o './', como você mencionou. Dessa forma, o Webpack reconhecerá o caminho como um módulo do Node e procurará pelo arquivo CSS na pasta node_modules. Além disso, essa é uma boa prática, já que você não precisa definir um caminho relativo ao diretório atual para importar um módulo instalado via npm.

Pra exemplificar, segue abaixo um trecho de código de configuração do Webpack que utiliza a importação sem o './':

module.exports = {
  // Contexto definido como a raiz da aplicação
  context: path.resolve(__dirname, 'app'),
  entry: {
    app: './src/js/app.js',
  },
  output: {
    filename: '[name].bundle.js',
    path: path.resolve(__dirname, 'app/dist'),
    clean: true,
  },
  module: {
    rules: [{ test: /\.css$/, use: ['style-loader', 'css-loader'] }],
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './src/app.html',
      filename: 'app.html',
      hash: true,
    }),
  ],
};

E o código de importação do arquivo CSS sem o './':

import 'bootstrap/dist/css/bootstrap.css';

Um abraço.