Assets no Webpack

Em cada projeto, existem alguns recursos ou assets (assets). Esses assets são coisas como imagens, arquivos de fonte e itens semelhantes.

Normalmente, queremos simplesmente transferir os recursos da pasta do projeto para a pasta de build. Mas, novamente, surge o problema do cache. Por exemplo, o navegador armazena imagens em cache. Isso significa que se alterarmos a imagem, sem mudar o nome do seu arquivo, os usuários do site verão a versão anterior da imagem, pois ela estava em cache para eles.

A solução para o problema, como você já sabe, é adicionar um hash ao nome do arquivo. O Webpack permite copiar arquivos de recursos para a pasta de build, adicionando hashes a eles e, o mais importante, alterando em todos os arquivos os caminhos para esses recursos para os novos.

No Webpack, o trabalho com assets é realizado usando módulos especiais de assets. Existem quatro tipos: asset/resource, asset/inline, asset/source, asset.

O módulo asset/resource copia arquivos da pasta do projeto para a pasta de build e substitui os caminhos para eles por novos. O módulo asset/inline pega os arquivos da pasta do projeto e no código de build substitui os caminhos dos arquivos por base64. O módulo asset/source pega os arquivos da pasta do projeto e retorna-os como uma string de texto. O módulo asset escolhe automaticamente se copia o arquivo para a pasta de build ou o transforma em base. A escolha é feita dependendo do tamanho do arquivo. Por padrão, arquivos maiores que 8kb são gerados como arquivos.

O esquema geral de aplicação desses módulos é o seguinte:

webpack.config.jsmodule: {
  rules: [
    {
      test: /\.png$/,        // arquivos
      type: 'asset/resource' // tipo de módulo
    }
  ]
},