Razzle: Como carregar imagens e outros ativos estáticos?

por exemplo e para fontes, você pode adicionar o seguinte:

,
{
  test: /\.(woff)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
  loader: "url?limit=100000&mimetype=application/font-woff"
}

o servidor não entende a extensão da imagem, você precisa usar o gancho para o ssr
https://github.com/bahmutov/node-hook

você também pode adicionar neste servidor de arquivos

require('babel-register')
if (development variable) require.extensions['.png'] = function () {};
require('./server')

Usei https://github.com/tcoopman/image-webpack-loader para lidar com as imagens. Acho que é baseado no carregador de arquivos, mas permite otimizar imagens.

fechando isso

@jaredpalmer ei cara, obrigado pelo kit incrível :) sinto muito por voltar a fazer isso, mas posso perguntar como você está lidando com imagens / estáticas SSR como fontes em seus projetos? por exemplo, como você está abordando:

// logo-component.js
import LogoImage from './logo.png' // colocated image in component folder

export default ({ linkUrl }) =>
  <a href={linkUrl}>
    <img src={LogoImage} alt="Logo" /> 
  </a>

Tenho usado webpack-isomorphic-tools para lidar com os casos acima, o que funciona, mas a ergonomia e a configuração parecem muito frágeis e complicadas ... estou prestes a iniciar outro projeto, seria ótimo ouvir seus pensamentos e abordagem — parece que assets.json poderia ser usado para estática

obrigado mais uma vez, jared, qualquer direção, configuração padrão ou webpack que você pudesse fornecer seria muito apreciada, e eu ficaria feliz em enviar um PR se for algo que você deseja adicionar ao iniciador

Eu suspeito que provavelmente estou negligenciando uma solução super simples .... obrigado novamente! :)

Tudo o que você precisa fazer é instalar url-loader via npm e adicionar o seguinte a cada webpack.config:

      ....
      {
        test: /\.(gif|jpe?g|png|ico)$/,
        loader: 'url-loader?limit=10000'
      },
      {
        test: /\.(otf|eot|svg|ttf|woff|woff2).*$/,
        loader: 'url-loader?limit=10000'
      }
      ...

Você pode então apenas solicitá-los exatamente como descrito acima. BTW, o parâmetro limit apenas diz a url-loader em qual limite ele deve realmente gerar uma imagem em comparação com a criação de um uri de dados.

EDITAR:

Remova também new webpack.IgnorePlugin(/\.(css|less|scss|svg|png|jpe?g|png)$/), da configuração do servidor webpack.

@jaredpalmer obrigado pela resposta :) esse é exatamente o problema que estava enfrentando ... como eu disse, fui capaz de resolver usando https://www.npmjs.com/package/webpack-isomorphic-tools, mas realmente parece muito desajeitado ...

@ rowellx68 você mencionou usando image-webpack-loader — você poderia elaborar?

@ b2 , você se importaria de fornecer algum contexto adicional ou exemplo para sua solução node-hook ? existe uma maneira de integrar com o plugin de ativos, para que possamos usar um único manifesto?

@justingreenberg babel-register não consegue lidar com os tipos de arquivo de imagem, uma solução alternativa é modificar o servidor :

require('babel-register');
if (process.env.NODE_ENV == 'development') {
  require.extensions['.png'] = function () {};
  require.extensions['.jpg'] = function () {};
  require.extensions['.jpeg'] = function () {};
  require.extensions['.woff'] = function () {};
  require.extensions['.woff2'] = function () {};
  require.extensions['.ico'] = function () {};
  require.extensions['.svg'] = function () {};
}
require('./server');

@justingreenberg image-webpack-loader irá apenas otimizar suas imagens ... você usaria em conjunto com file-loader :

...
      {
        test: /\.(png|jpg|jpeg|gif)(\?.*)?$/,
        loaders: [
          'file',
          'image-webpack?' + JSON.stringify({
            bypassOnDebug:true,
            progressive: true,
            optimizationLevel: 7,
            interlaced: true,
            pngquant: {
              quality: "65-90",
              speed: 4
            },
            svgo: {
              removeUnknownsAndDefaults: false,
              cleanupIDs: false
            }
          })
        ]
      },

Eu ainda usaria url-loader para fontes e svg's com isso.

@ rowellx68 @ b2whats devemos criar um PR para isso com url-loader ? Quais são as desvantagens de require.extension no desenvolvimento? É feio, mas mais limpo do que agrupar o servidor apenas para dev IMHO. 🤔

@jaredpalmer re: patching requer solução alternativa, esta é uma abordagem interessante ... então, registrar extensões manualmente com require apenas permite que o módulo atinja url-loader , faz sentido!

re: image-webpack, foi o que entendi (na verdade, uma otimização), mas pensei que talvez houvesse algo que estava faltando para o uso do nó desde que @ rowellx68 disse que o estava usando para imagens

obrigado novamente!

@jaredpalmer require.extensions parece ter sido preterido ?

@justingreenberg re: image-webpack-loader . Na verdade, é principalmente para otimizar imagens. No entanto, as imagens resultantes não foram adicionadas a assest.json .

@ rowellx68
precisamos do modo slice dev e prod. a configuração do webpack pode ser diferente. No modo dev, precisamos do servidor obter a url normal da imagem. No modo prod, podemos usar qualquer otimização

Eu modifiquei os scripts de compilação. Agora existe uma pasta pbulic para você, robots.txt, favicon etc. Não é a "solução perfeita", mas funciona. Bundles js -> public/assets (que não é verificado no git).

Irá explorar @justingreenberg 's solução requireHooks como que permitiria inlining e bloqueio de cache.

Ei todos, me avisem se isso estiver fora do escopo, mas a discussão de ativos estáticos parecia um tanto relevante.

Sou alguém que é bastante novo no mundo do webpack (leia: não tenho ideia de como usá-lo ainda) e estou tentando usar este projeto para construir um aplicativo da web usando um guia de estilo do cliente. em vez de reaplicar estilos CSS continuamente, estou tentando carregar um arquivo CSS que contém o guia de estilo do cliente. existe uma maneira rápida e relativamente fácil de carregar sua folha de estilo estaticamente e usar o aphrodite para gerenciar o layout, etc?

Que tal agrupar a entrada do servidor com o webpack usando a opção target: 'node' ?
Teríamos todas as vantagens dos carregadores de webpack no lado do servidor sem a necessidade de hackear o require () do nó ou usar webpack-isomorphic-tools.
Ou há um grande problema ou desvantagem nessa abordagem que não estou vendo? além de precisar ter dois relógios webpack ao desenvolver

Edit: acabei de ver que já está sendo feito para prod, mas por que não dev também?