2
respostas

Não seria 2 erros?

A resposta marcada como correta na questão é que existe apenas 1 erro no código apresentado.

Porém se utilizar o import no arquivo app.js da maneira abaixo:

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

Você receberá um erro.

Como falado pelo mestre Flávio durante as vídeos aulas, não precisa desse ./ porque basta colocar o nome do módulo do node e resto no caminho, assim:

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

Sendo assim, seria 2 erros no código apresentado na questão, ou foi apenas um typo na questão?

2 respostas

Na verdade não.

Para usar como no segundo exemplo, vc tem q especificar qual é a raiz do projeto no webpack. Por isso vc nao precisa usar o "./";

Mas o default seria usar o caminho relativo para localizar o arquivo entao, dependendo da estrutura do projeto, para mim está okay.

Abraços

Boa noite Diego, obrigado pela resposta.

Especificar a raiz do projeto no webpack seria usando a propriedade context ?

meu webpackconfig.js está assim:

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
//const Copywebpackplugin = require('copy-webpack-plugin');

module.exports = {
    entry: './app/src/js/app.js',
    output: {
        filename: 'bundle.js',
        path: path.resolve(__dirname, 'app/dist'),
        clean: true
    },
    module: {
        rules: [
            { test: /\.css$/, use: ['style-loader', 'css-loader']}
        ]
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: './app/src/app.html',
            filename: 'app.html',
            hash: true
        })
    ]
};

Se eu uso o import './bootstrap/dist/css/bootstrap.css';

é apresentado o seguinte erro

ERROR in ./app/src/js/app.js 2:0-44
Module not found: Error: Can't resolve './bootstrap/dist/css/bootstrap.css' in '/home/victorhf/Developer/Dev-study/JavaScript/webpack-alura/app/src/js'
resolve './bootstrap/dist/css/bootstrap.css' in '/home/victorhf/Developer/Dev-study/JavaScript/webpack-alura/app/src/js'
  using description file: /home/victorhf/Developer/Dev-study/JavaScript/webpack-alura/package.json (relative path: ./app/src/js)
    Field 'browser' doesn't contain a valid alias configuration
    using description file: /home/victorhf/Developer/Dev-study/JavaScript/webpack-alura/package.json (relative path: ./app/src/js/bootstrap/dist/css/bootstrap.css)
      no extension
        Field 'browser' doesn't contain a valid alias configuration

Já quando omito o ./ e coloco import 'bootstrap/dist/css/bootstrap.css'; funciona normalmente.

Quer mergulhar em tecnologia e aprendizagem?

Receba a newsletter que o nosso CEO escreve pessoalmente, com insights do mercado de trabalho, ciência e desenvolvimento de software