Bom dia Thiago, vou resumir essa história:
a) Quando trabalharmos com módulo, todo arquivo .js é um módulo que esconde tudo o que for declarado dentro dele por padrão.
b) Para que alguém possa importar algo de um módulo, o módulo a ser importado precisa exportar (exports) as funções ou declarações de classes que realizada. Lembre-se do item a), no qual um módulo esconde tudo o que possui por padrão. É ai que entra a instrução exports
. Você precisa adicioná-la para cada coisa que deseja exportar do módulo.
c) Quem deseja importar algo de um módulo, precisa fazer isso através da instrução import
. Porém, não adianta utilizá-la se no módulo que esta sendo importado não foi usado a instrução exports
. Em suma, você só pode fazer import
para uma funcionalidade de um módulo se a funcionalidade foi exportada com exports
.
No caso do loader, ele importa apenas o primeiro script (que agora chamamos de módulo) e a partir dele sai resolvendo todas as dependências. A vantagem disso é que não precisamos importar cada script na página e ainda termos que tomar cuidado com a ordem de carregamento.
Hoje, apesar de ainda bugado, o Chrome já suporta o <script type="module">
que permite fazer o que o loader que você usou faz. Mas não aconselho a usar pois a coisa ainda não esta estável.
Sucesso e bom estudo meu aluno!