Razzle: Wie lade ich Bilder und andere statische Elemente?

Zum Beispiel und für Schriftarten können Sie Folgendes hinzufügen:

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

Der Server versteht die Image-Erweiterung nicht. Sie müssen den erforderlichen Hook für ssr verwenden
https://github.com/bahmutov/node-hook

Auch können Sie in dieser Datei hinzufügen Server

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

Ich habe https://github.com/tcoopman/image-webpack-loader verwendet , um mit den Bildern umzugehen. Ich denke, es basiert auf File-Loader, ermöglicht es Ihnen jedoch, Bilder zu optimieren.

dies schließen

@jaredpalmer hey man, danke für das tolle Kit :) Es tut mir leid, das wieder in die Länge zu ziehen, aber darf ich fragen, wie Sie mit SSR-Bildern / Statiken wie Schriftarten in Ihren Projekten

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

Ich habe webpack-isomorphic-tools , um die oben genannten Fälle zu behandeln, was funktioniert, aber die Ergonomie und das Setup fühlen sich sehr spröde und hackig an ... Ich bin dabei, ein weiteres Projekt zu starten. Es wäre wirklich großartig, Ihre Gedanken zu hören und Ansatz - es scheint, als könnte assets.json auch für die Statik verwendet werden

Nochmals vielen Dank Jared, jede Richtung, Boilerplate oder Webpack-Konfiguration, die Sie bereitstellen könnten, wäre sehr dankbar, und ich würde gerne eine PR einreichen, wenn es etwas ist, das Sie dem Starter hinzufügen möchten

Ich vermute, ich übersehen wahrscheinlich eine super einfache Lösung .... nochmals vielen Dank !! :) :)

Alles, was Sie tun müssen, um url-loader über npm zu installieren und dann jeder webpack.config Folgendes hinzuzufügen:

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

Sie können sie dann einfach genau so benötigen, wie Sie es oben beschrieben haben. Übrigens teilt der Limit-Parameter url-loader bei welchem ​​Schwellenwert tatsächlich ein Bild generiert werden soll, anstatt einen Daten-Uri zu erstellen.

BEARBEITEN:

Entfernen Sie auch new webpack.IgnorePlugin(/\.(css|less|scss|svg|png|jpe?g|png)$/), aus der Webpack-Serverkonfiguration.

@jaredpalmer danke für die Antwort :) das ist genau das Problem, auf das ich https://www.npmjs.com/package/webpack-isomorphic-tools lösen, aber es fühlt sich wirklich an sehr klobig ...

@ rowellx68 Sie haben die Verwendung von image-webpack-loader erwähnt - könnten Sie das vielleicht näher erläutern?

@ b2was würde es Ihnen etwas node-hook -Lösung bereitzustellen ? Gibt es eine Möglichkeit zur Integration in das Assets-Plugin, sodass wir ein einziges Manifest verwenden können?

@justingreenberg babel-register kann die Bilddateitypen nicht verarbeiten. Eine Problemumgehung besteht darin, den Server zu ändern:

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 optimiert nur Ihre Bilder ... Sie würden es zusammen mit 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
            }
          })
        ]
      },

Ich würde immer noch url-loader für Schriftarten und SVGs verwenden.

@ rowellx68 @ b2was sollen wir dafür eine PR mit url-loader erstellen? Was sind die Nachteile von require.extension in dev? Es ist hässlich, aber sauberer als den Server nur für Entwickler zu bündeln, IMHO. 🤔

@jaredpalmer re: Für das Patchen ist eine Wenn Sie also Erweiterungen mit require manuell registrieren, kann das Modul nur url-loader drücken. Dies ist sinnvoll!

re: image-webpack, das war mein Verständnis (wirklich eine Optimierung), aber ich dachte, dass mir vielleicht etwas für die Knotennutzung fehlt, da @ rowellx68 sagte, dass er es für Bilder verwendet

Danke noch einmal!

@jaredpalmer require.extensions scheint veraltet zu sein ?

@justingreenberg re: image-webpack-loader . Es dient in der Tat in erster Linie zur Optimierung von Bildern. Die resultierenden Bilder wurden jedoch nicht zu assest.json hinzugefügt.

@ rowellx68
Wir brauchen Slice Dev und Prod Mode. Die Webpack-Konfiguration kann unterschiedlich sein. Im Dev-Modus müssen wir vom Server die normale URL des Bildes abrufen. Im Prod-Modus können wir beliebige Optimierungen verwenden

Ich habe Build-Skripte geändert. Es gibt jetzt einen pbulic-Ordner für Sie robots.txt, favicon usw. Es ist nicht die "perfekte Lösung", aber es funktioniert. Bundles js -> public/assets (was nicht in git eingecheckt ist).

Wird die Anforderung von @justingreenberg für requireHooks untersuchen, da dies Inlining und Cache-Busting ermöglichen würde.

Hallo zusammen, lassen Sie mich wissen, ob dies nicht möglich ist, aber die Diskussion über statische Assets schien etwas relevant zu sein.

Ich bin jemand, der in der Webpack-Welt ziemlich neu ist (lesen Sie: noch keine Ahnung, wie man es verwendet), und ich versuche, mit diesem Projekt eine Web-App mithilfe des Styleguides eines Kunden zu erstellen. Anstatt CSS-Stile immer wieder neu anzuwenden, versuche ich, eine CSS-Datei zu laden, die den Styleguide des Clients enthält. Gibt es eine schnelle und relativ schmerzlose Möglichkeit, das Stylesheet statisch zu laden und dann mit Aphrodite das Layout usw. zu verwalten?

Was ist mit der Bündelung des Servereintrags mit dem Webpack mithilfe der Option target: 'node' ?
Wir hätten alle guten Webpack-Lader auf der Serverseite, ohne die Anforderungen von node () hacken oder webpack-isomorphe Tools verwenden zu müssen.
Oder gibt es ein großes Problem oder einen Nachteil bei diesem Ansatz, den ich nicht sehe? Außerdem müssen bei der Entwicklung zwei Webpack-Uhren vorhanden sein

Edit: habe gerade gesehen, dass es bereits für Prod gemacht wird, aber warum nicht auch Dev?