Razzle: 画像やその他の静的アセットを読み込む方法は？

たとえば、フォントの場合、次を追加できます。

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

サーバーは画像拡張を理解していません。ssrのrequirehookを使用する必要があります
https://github.com/bahmutov/node-hook

このファイルサーバーに追加することもでき

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

https://github.com/tcoopman/image-webpack-loaderを使用して画像を処理しました。 ファイルローダーをベースにしていると思いますが、画像を最適化することができます。

これを閉じる

@jaredpalmerやあ、素晴らしいキットをありがとう:)これをバックアップして申し訳ありませんが、プロジェクトでフォントのようなSSR画像/統計をどのように処理しているか尋ねてもいいですか？ たとえば、どのようにアプローチしていますか。

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

私は上記のケースを処理するためにwebpack-isomorphic-toolsを使用してきましたが、これは機能しますが、人間工学とセットアップは非常に脆弱でハックな感じがします...別のプロジェクトを開始しようとしています。あなたの考えを聞いて本当に素晴らしいと思います。アプローチ— assets.jsonは静力学にも使用できるように感じます

もう一度jaredに感謝します、あなたが提供できるどんな方向、ボイラープレートまたはウェブパック構成も大いに感謝されます、そしてそれがあなたがスターターに追加したいものであるならば私はPRを提出したいと思います

私はおそらく超単純な解決策を見落としているのではないかと思います....ありがとうございました!! :)

npm経由でurl-loaderをインストールしてから、各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'
      }
      ...

次に、上記で説明したとおりにそれらを要求できます。 ところで、limitパラメーターは、実際に画像を生成するしきい値とデータURIを作成するしきい値をurl-loader指示するだけです。

編集：

また、webpackサーバー構成からnew webpack.IgnorePlugin(/\.(css|less|scss|svg|png|jpe?g|png)$/),を削除します。

@jaredpalmer応答に感謝します:)それはまさに私がhttps://www.npmjs.com/package/webpack-isomorphic-toolsを使用して解決することができましたが、それは本当に感じますとても不格好です...

@ rowellx68 image-webpack-loaderの使用について詳しく教えていただけますか？

@ b2 node-hookソリューションの追加のコンテキストまたは例を提供していただけませんか。 アセットプラグインと統合して、単一のマニフェストを使用できるようにする方法はありますか？

@justingreenberg babel-registerは画像ファイルタイプを処理できません。回避策はサーバーを変更することです：

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は画像を最適化するだけです... 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
            }
          })
        ]
      },

私はまだこれでフォントとsvgにurl-loaderを使用します。

@ rowellx68 @ b2whats url-loaderでこのためのPRを作成する必要がありますか？ 開発におけるrequire.extension欠点は何ですか？ それは醜いですが、開発者の私見のためだけにサーバーをバンドルするよりもクリーンです。 🤔

@jaredpalmer re：パッチ適用には回避策が必要です。これは興味深いアプローチです...したがって、requireに拡張機能を手動で登録すると、モジュールがurl-loaderに到達するだけで、理にかなっています。

re：image-webpack、それは私の理解でした（本当に最適化）が、 @ rowellx68が画像に使用していると言ったので、ノードの使用に欠けているものがあるのではないかと思いました

再度、感謝します！

@jaredpalmer require.extensionsは非推奨になっているよう

@justingreenberg re： image-webpack-loader 。 それは確かに主に画像を最適化するためのものです。 ただし、結果の画像はassest.json追加されません

@ rowellx68
スライス開発モードと製品モードが必要です。 webpackの設定は異なる場合があります。 開発モードでは、サーバーからイメージの通常のURLを取得する必要があります。 製品モードでは、任意の最適化を使用できます

ビルドスクリプトを変更しました。 これで、robots.txt、ファビコンなどのpbulicフォルダーができました。これは「完璧なソリューション」ではありませんが、機能します。 バンドルjs-> public/assets （gitにチェックインされていません）。

@justingreenbergのrequireHooksソリューションを検討します。これにより、インライン化とキャッシュバスティングが可能になります。

やあ、これが範囲外かどうか教えてください。しかし、静的資産の議論はやや関連しているように見えました。

私はWebpackの世界にかなり慣れていない人であり（読んでください：まだ使用方法の手がかりはありません）、このプロジェクトを使用して、クライアントのスタイルガイドを使用してWebアプリを構築しようとしています。 CSSスタイルを何度も再適用するのではなく、クライアントのスタイルガイドを含むCSSファイルを読み込もうとしています。 スタイルシートを静的にロードしてから、アフロディーテを使用してレイアウトなどを管理する、すばやく比較的簡単な方法はありますか？

target: 'node'オプションを使用してサーバーエントリをwebpackにバンドルするのはどうですか？
ノードのrequire（）をハックしたり、webpack-isomorphic-toolsを使用したりすることなく、サーバー側ですべてのwebpackローダーの機能を利用できます。
それとも、私が見ていないこのアプローチに大きな問題や欠点がありますか？ 開発時に2つのwebpackウォッチが必要なことに加えて

編集：それがすでにprodのために行われているのを見ただけですが、なぜdevもしないのですか？