Razzle: ¿Cómo cargar imágenes y otros activos estáticos?

por ejemplo, y para las fuentes, puede agregar lo siguiente:

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

el servidor no comprende la extensión de la imagen, necesita usar require hook para ssr
https://github.com/bahmutov/node-hook

también puede agregar en este servidor de archivos

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

He usado https://github.com/tcoopman/image-webpack-loader para lidiar con las imágenes. Creo que se basa en un cargador de archivos, pero te permite optimizar las imágenes.

cerrando esto

@jaredpalmer hey man, gracias por el increíble kit :) Lamento tener que hacer una copia de seguridad, pero ¿puedo preguntar cómo está manejando imágenes SSR / estáticas como fuentes en sus proyectos? por ejemplo, cómo te acercas:

// 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>

He estado usando webpack-isomorphic-tools para manejar los casos anteriores, lo cual funciona, pero la ergonomía y la configuración se sienten muy frágiles y hack ... Estoy a punto de comenzar otro proyecto, sería realmente bueno escuchar sus pensamientos y enfoque: parece que assets.json podrían usar para estática

gracias de nuevo jared, cualquier dirección, código repetitivo o configuración de paquete web que pueda proporcionar será muy apreciada, y me complacerá enviar un PR si es algo que desea agregar al inicio

sospecho que probablemente estoy pasando por alto una solución súper simple ... ¡gracias de nuevo! :)

Todo lo que necesita hacer es instalar url-loader través de npm y luego agregar lo siguiente 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'
      }
      ...

Luego, puede solicitarlos exactamente como lo describió anteriormente. Por cierto, el parámetro de límite solo le dice a url-loader en qué umbral debería generar una imagen en lugar de crear un uri de datos.

EDITAR:

También elimine new webpack.IgnorePlugin(/\.(css|less|scss|svg|png|jpe?g|png)$/), de la configuración del servidor webpack.

@jaredpalmer gracias por la respuesta :) ese es exactamente el problema con el que me estaba encontrando ... como dije, pude resolver usando https://www.npmjs.com/package/webpack-isomorphic-tools pero realmente se siente muy torpe ...

@ rowellx68 , mencionaste el uso de image-webpack-loader, ¿podrías quizás dar más detalles?

@ b2¿qué le importaría proporcionar algún contexto o ejemplo adicional para su solución node-hook ? ¿Hay alguna forma de integrarlo con el complemento de activos, de modo que podamos usar un solo manifiesto?

@justingreenberg babel-register no puede manejar los tipos de archivos de imagen, una solución es modificar el 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 solo optimizará sus imágenes ... lo usaría en conjunto con 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
            }
          })
        ]
      },

Todavía usaría url-loader para fuentes y svg con esto.

@ rowellx68 @ b2¿qué deberíamos crear un PR para esto con url-loader ? ¿Cuáles son las desventajas del require.extension en dev? Es feo, pero más limpio que empaquetar el servidor solo para desarrolladores en mi humilde opinión. 🤔

@jaredpalmer re: el parcheo requiere una solución alternativa, este es un enfoque interesante ... así que registrar manualmente las extensiones con require solo permite que el módulo llegue a url-loader , ¡tiene sentido!

re: image-webpack, eso fue lo que entendí (realmente una optimización) pero pensé que tal vez faltaba algo para el uso del nodo ya que @ rowellx68 dijo que lo estaba usando para imágenes

¡gracias de nuevo!

@jaredpalmer require.extensions parece haber quedado obsoleto ?

@justingreenberg re: image-webpack-loader . De hecho, es principalmente para optimizar imágenes. Sin embargo, las imágenes resultantes no se agregaron a assest.json .

@ rowellx68
necesitamos el modo slice dev y prod. La configuración del paquete web puede ser diferente. En modo dev, necesitamos que el servidor obtenga la URL normal de la imagen. En modo prod podemos usar cualquier optimización

He modificado los scripts de compilación. Ahora hay una carpeta pbulic para su archivo robots.txt, favicon, etc. No es la "solución perfecta" pero funciona. Paquetes js -> public/assets (que no está registrado en git).

Explorará @justingreenberg solución requireHooks 's ya que ello permitiría inlining y el almacenamiento en caché.

Hola a todos, avíseme si esto está fuera de alcance, pero la discusión de activos estáticos parecía algo relevante.

Soy alguien que es bastante nuevo en el mundo de los paquetes web (léase: aún no tengo ni idea de cómo usarlo) y estoy tratando de usar este proyecto para crear una aplicación web usando la guía de estilo de un cliente. en lugar de volver a aplicar estilos CSS una y otra vez, estoy intentando cargar un archivo CSS que contiene la guía de estilo del cliente. ¿Existe una forma rápida y relativamente sencilla de cargar su hoja de estilo de forma estática y luego usar afrodita para administrar el diseño, etc.?

¿Qué hay de empaquetar la entrada del servidor con el paquete web usando la opción target: 'node' ?
Tendríamos todas las bondades de los cargadores de paquetes web en el lado del servidor sin necesidad de hackear el require () del nodo o usar herramientas-isomórficas de paquetes web.
¿O hay un problema importante o una desventaja en este enfoque que no veo? además de necesitar dos relojes webpack al desarrollar

Editar: acabo de ver que ya se está haciendo para prod, pero ¿por qué no dev también?