Razzle: Bagaimana cara memuat gambar dan aset statis lainnya?

misalnya dan untuk font, Anda dapat menambahkan yang berikut ini:

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

Server tidak memahami ekstensi gambar, Anda perlu menggunakan require hook untuk ssr
https://github.com/bahmutov/node-hook

Anda juga dapat menambahkan di server file ini

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

Saya telah menggunakan https://github.com/tcoopman/image-webpack-loader untuk menangani gambar. Saya pikir ini didasarkan pada file-loader, tetapi memungkinkan Anda untuk mengoptimalkan gambar.

menutup ini

@jaredpalmer hey man, terima kasih untuk kit yang luar biasa :) Saya minta maaf untuk bekerja keras kembali, tapi bolehkah saya bertanya bagaimana Anda menangani gambar / statik SSR seperti font di proyek Anda? misalnya, bagaimana Anda mendekati:

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

Saya telah menggunakan webpack-isomorphic-tools untuk menangani kasus di atas, yang berfungsi tetapi ergonomis dan pengaturannya terasa sangat rapuh dan hacky ... saya akan memulai proyek lain, akan sangat senang mendengar pemikiran Anda dan Pendekatan — rasanya assets.json bisa digunakan untuk statika

terima kasih lagi jared, segala arah, konfigurasi boilerplate atau webpack yang dapat Anda berikan akan sangat dihargai, dan saya akan dengan senang hati mengirimkan PR jika itu adalah sesuatu yang ingin Anda tambahkan ke starter

Saya menduga saya mungkin mengabaikan solusi yang super sederhana .... terima kasih lagi !! :)

Yang perlu Anda lakukan, instal url-loader melalui npm dan kemudian tambahkan yang berikut ini ke setiap 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'
      }
      ...

Anda kemudian dapat meminta mereka persis seperti yang Anda jelaskan di atas. BTW parameter batas hanya memberi tahu url-loader pada ambang berapa yang seharusnya menghasilkan gambar vs. membuat data-uri.

EDIT:

Hapus juga new webpack.IgnorePlugin(/\.(css|less|scss|svg|png|jpe?g|png)$/), dari konfigurasi server webpack.

@jaredpalmer terima kasih atas tanggapannya :) itulah masalah yang saya hadapi ... seperti yang saya katakan, saya dapat menyelesaikannya menggunakan https://www.npmjs.com/package/webpack-isomorphic-tools tetapi itu benar-benar terasa sangat kikuk ...

@ rowellx68 Anda menyebutkan menggunakan image-webpack-loader — bisakah Anda menjelaskan lebih lanjut?

@ b2whats maukah Anda memberikan konteks atau contoh tambahan untuk solusi node-hook ? apakah ada cara untuk mengintegrasikan dengan plugin assets, jadi kita bisa menggunakan satu manifes?

@justingreenberg babel-register tidak dapat menangani jenis file gambar, solusinya adalah dengan memodifikasi server :

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 hanya akan mengoptimalkan gambar Anda ... Anda akan menggunakannya bersama-sama dengan 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
            }
          })
        ]
      },

Saya masih akan menggunakan url-loader untuk font dan svg dengan ini.

@ rowellx68 @ b2whats kita harus membuat PR untuk ini dengan url-loader ? Apa kelemahan dari require.extension in dev? Ini jelek, tapi lebih bersih dari bundling server hanya untuk dev IMHO. 🤔

@jaredpalmer re: patching membutuhkan solusi, ini adalah pendekatan yang menarik ... jadi mendaftarkan ekstensi secara manual dengan require hanya memungkinkan modul untuk mencapai url-loader , masuk akal!

re: image-webpack, itu pemahaman saya (benar-benar optimasi) tetapi saya pikir mungkin ada sesuatu yang saya lewatkan untuk penggunaan node karena @ rowellx68 mengatakan dia menggunakannya untuk gambar

Terima kasih lagi!

@jaredpalmer require.extensions sepertinya sudah tidak digunakan lagi ?

@justingreenberg re: image-webpack-loader . Ini memang terutama untuk mengoptimalkan gambar. Namun, gambar yang dihasilkan tidak ditambahkan ke assest.json .

@ rowellx68
kita membutuhkan mode slice dev dan prod. konfigurasi webpack mungkin berbeda. Dalam mode dev kita perlu dari server mendapatkan url normal dari gambar. Dalam mode prod kita dapat menggunakan optimasi apapun

Saya telah mengubah skrip build. Sekarang ada folder pbulic untuk Anda robots.txt, favicon, dll. Ini bukan "solusi sempurna" tetapi berfungsi. Bundel js -> public/assets (yang tidak diperiksa ke git).

Akan mengeksplorasi @justingreenberg 's solusi requireHooks seperti yang akan memungkinkan untuk inlining dan cache penghilang.

hey semuanya, beri tahu saya jika ini di luar cakupan, tetapi diskusi aset statis tampaknya agak relevan.

Saya seseorang yang cukup baru di dunia webpack (baca: belum tahu cara menggunakannya) dan saya mencoba menggunakan proyek ini untuk membangun aplikasi web menggunakan panduan gaya klien. Daripada menerapkan kembali gaya CSS berulang kali, saya mencoba memuat file CSS yang berisi panduan gaya klien. adakah cara yang cepat dan relatif tidak menyakitkan untuk memuat stylesheet mereka secara statis dan kemudian menggunakan aphrodite untuk mengelola tata letak, dll?

Bagaimana dengan menggabungkan entri server dengan webpack menggunakan opsi target: 'node' ?
Kami akan memiliki semua kebaikan webpack loader di sisi server tanpa perlu meretas membutuhkan node () atau menggunakan alat webpack-isomorphic.
Atau apakah ada masalah besar atau sisi negatif dari pendekatan ini yang tidak saya lihat? selain itu perlu memiliki dua jam tangan webpack saat mengembangkan

Sunting: hanya melihatnya sudah dilakukan untuk prod, tapi mengapa tidak dev juga?