Razzle: Comment charger des images et autres actifs statiques?

par exemple et pour les polices, vous pouvez ajouter ce qui suit:

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

le serveur ne comprend pas l'extension d'image, vous devez utiliser un hook pour ssr
https://github.com/bahmutov/node-hook

vous pouvez également ajouter dans ce serveur de fichiers

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

J'ai utilisé https://github.com/tcoopman/image-webpack-loader pour gérer les images. Je pense qu'il est basé sur le chargeur de fichiers, mais vous permet d'optimiser les images.

fermer ça

@jaredpalmer hé mec, merci pour le kit génial :) Je suis désolé de faire une sauvegarde, mais puis-je vous demander comment vous gérez les images SSR / statiques comme les polices dans vos projets? par exemple, comment abordez-vous:

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

J'ai utilisé webpack-isomorphic-tools pour gérer les cas ci-dessus, ce qui fonctionne mais l'ergonomie et la configuration semblent très fragiles et hacky ... je suis sur le point de démarrer un autre projet, ce serait vraiment génial d'entendre vos pensées et approche - il semble que assets.json pourrait également être utilisé pour la statique

merci encore jared, n'importe quelle direction, configuration standard ou webpack que vous pourriez fournir serait grandement appréciée, et je serais heureux de soumettre un PR si c'est quelque chose que vous souhaitez ajouter au démarreur

Je soupçonne que je néglige probablement une solution super simple .... merci encore !! :)

Tout ce dont vous avez besoin pour installer url-loader via npm, puis ajouter ce qui suit à chaque 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'
      }
      ...

Vous pouvez ensuite les exiger exactement comme vous l'avez décrit ci-dessus. BTW, le paramètre limit indique simplement url-loader à quel seuil il doit réellement générer une image par rapport à la création d'un data-uri.

ÉDITER:

Supprimez également new webpack.IgnorePlugin(/\.(css|less|scss|svg|png|jpe?g|png)$/), de la configuration du serveur Webpack.

@jaredpalmer merci pour la réponse :) c'est exactement le problème que je rencontrais ... comme je l'ai dit, j'ai pu résoudre en utilisant https://www.npmjs.com/package/webpack-isomorphic-tools mais ça se sent vraiment très maladroit ...

@ rowellx68 vous avez mentionné l'utilisation de l'image-webpack-loader - pourriez-vous peut-être élaborer?

@ b2Qu'est-ce qui vous dérangerait de fournir un contexte ou un exemple supplémentaire pour votre solution node-hook ? existe-t-il un moyen d'intégrer le plugin assets, afin que nous puissions utiliser un seul manifeste?

@justingreenberg babel-register ne peut pas gérer les types de fichiers image, une solution de contournement consiste à modifier le serveur :

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 optimisera simplement vos images ... vous l'utiliseriez en tandem avec 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
            }
          })
        ]
      },

J'utiliserais toujours url-loader pour les polices et les svg avec ça.

@ rowellx68 @ b2 quoi devrions-nous créer un PR pour cela avec url-loader ? Quels sont les inconvénients du require.extension en développement? C'est moche, mais plus propre que de regrouper le serveur juste pour le développement à mon humble avis. 🤔

@jaredpalmer re: le correctif nécessite une solution de contournement, c'est une approche intéressante ... donc enregistrer manuellement les extensions avec require permet simplement au module de frapper url-loader , c'est logique!

re: image-webpack, c'était ma compréhension (vraiment une optimisation) mais je pensais qu'il y avait peut-être quelque chose qui me manquait pour l'utilisation des nœuds puisque @ rowellx68 a dit qu'il l'utilisait pour les images

Merci encore!

@jaredpalmer require.extensions semble être obsolète ?

@justingreenberg concernant : image-webpack-loader . C'est en effet avant tout pour l'optimisation des images. Cependant, les images résultantes n'ont pas été ajoutées dans assest.json .

@ rowellx68
nous avons besoin du mode slice dev et prod. La configuration de webpack peut être différente. En mode dev, nous avons besoin du serveur pour obtenir l'URL normale de l'image. En mode prod, nous pouvons utiliser toutes les optimisations

J'ai modifié les scripts de construction. Il y a maintenant un dossier pbulic pour vous robots.txt, favicon etc. Ce n'est pas la "solution parfaite" mais ça marche. Bundles js -> public/assets (qui n'est pas vérifié dans git).

Nous allons explorer la solution requireHooks de @justingreenberg car cela permettrait l'inlining et le contournement du cache.

bon à tous, faites-moi savoir si cela est hors de portée, mais la discussion sur les actifs statiques semblait quelque peu pertinente.

Je suis quelqu'un qui est assez nouveau dans le monde du webpack (lire: je ne sais pas encore comment l'utiliser) et j'essaie d'utiliser ce projet pour créer une application Web à l'aide du guide de style d'un client. plutôt que de réappliquer les styles CSS encore et encore, j'essaye de charger un fichier CSS qui contient le guide de style du client. Existe-t-il un moyen rapide et relativement simple de charger leur feuille de style de manière statique, puis d'utiliser aphrodite pour gérer la mise en page, etc.?

Qu'en est-il du regroupement de l'entrée du serveur avec webpack en utilisant l'option target: 'node' ?
Nous aurions tous les avantages des chargeurs Webpack du côté serveur sans avoir besoin de pirater require () du nœud ou d'utiliser les outils webpack-isomorphic-tools.
Ou y a-t-il un problème ou un inconvénient majeur dans cette approche que je ne vois pas? en plus d'avoir besoin de deux montres Webpack lors du développement

Edit: je viens de voir que c'est déjà fait pour la production, mais pourquoi pas le développement aussi?