Razzle: كيفية تحميل الصور والأصول الثابتة الأخرى؟

على سبيل المثال وبالنسبة للخطوط ، يمكنك إضافة ما يلي:

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

الخادم لا يفهم امتداد الصورة ، فأنت بحاجة إلى استخدام تتطلب ربط لـ ssr
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 للإحصاءات أيضًا

شكرًا مرة أخرى يا جاريد ، فإن أي اتجاه أو تنسيق معياري أو تكوين webpack الذي يمكنك تقديمه سيكون موضع تقدير كبير ، وسأكون سعيدًا بتقديم العلاقات العامة إذا كان شيئًا تريد إضافته إلى البداية

أظن أنني ربما أتغاضى عن حل بسيط للغاية .... شكرا مرة أخرى !! :)

كل ما عليك القيام به هو تثبيت url-loader عبر npm ثم إضافة ما يلي إلى كل 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'
      }
      ...

يمكنك بعد ذلك أن تطلبها تمامًا كما هو موضح أعلاه. راجع للشغل ، تخبر معلمة الحد url-loader عند الحد الذي يجب أن تنشئ فيه صورة بالفعل مقابل إنشاء uri للبيانات.

تعديل:

قم أيضًا بإزالة new webpack.IgnorePlugin(/\.(css|less|scss|svg|png|jpe?g|png)$/), من تهيئة خادم webpack.

@ jaredpalmer شكرًا على الاستجابة :) هذه هي المشكلة التي كنت https://www.npmjs.com/package/webpack-isomorphic-tools لكنها تشعر حقًا عالي الكعب ...

@ rowellx68 الذي ذكرته باستخدام image-webpack-loader - هل يمكنك التفصيل؟

@ b2whats هل تمانع في تقديم سياق إضافي أو مثال 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
            }
          })
        ]
      },

ما زلت أستخدم url-loader للخطوط و svg's مع هذا.

@ rowellx68 @ b2whats يجب علينا إنشاء url-loader ؟ ما هي سلبيات require.extension في التطوير؟ إنه قبيح ، لكنه أنظف من تجميع الخادم فقط من أجل dev IMHO. 🤔

jaredpalmer re: التصحيح يتطلب حلًا للملحقات مع يتطلب فقط يسمح للوحدة بضرب url-loader ، أمر منطقي!

re: image-webpack ، كان هذا ما أفهمه (حقًا تحسين) لكنني اعتقدت أنه ربما كان هناك شيء ما أفتقده لاستخدام العقدة لأن

شكرا لك مرة أخرى!

jaredpalmer require.extensions يبدو أنه قد تم إهماله ؟

justingreenberg re: image-webpack-loader . إنه بالفعل في المقام الأول لتحسين الصور. ومع ذلك ، لم تتم إضافة الصور الناتجة إلى assest.json .

MustafaHosny اللهم امين
نحن بحاجة إلى وضع الشرائح ووضع prod. قد يكون تكوين حزمة الويب مختلفًا. في وضع dev ، نحتاج من الخادم إلى الحصول على عنوان url عادي للصورة. في وضع prod يمكننا استخدام أي تحسينات

لقد قمت بتعديل سكربتات البناء. يوجد الآن مجلد pbulic خاص بك مثل ملف robots.txt و favicon وما إلى ذلك. إنه ليس "الحل الأمثل" ولكنه يعمل. حزم js -> public/assets (والتي لم يتم إيداعها في git).

سوف تستكشفjustingreenberg الصورة حل requireHooks كما أن من شأنه أن يسمح لرمز مصدر ومخبأ خرق.

مرحبًا جميعًا ، اسمحوا لي أن أعرف ما إذا كان هذا خارج النطاق ، لكن مناقشة الأصول الثابتة بدت ذات صلة إلى حد ما.

أنا شخص جديد إلى حد ما في عالم webpack (اقرأ: لا يوجد دليل على كيفية استخدامه حتى الآن) وأحاول استخدام هذا المشروع لإنشاء تطبيق ويب باستخدام دليل أسلوب العميل. بدلاً من إعادة تطبيق أنماط CSS مرارًا وتكرارًا ، أحاول تحميل ملف CSS يحتوي على دليل أسلوب العميل. هل هناك طريقة سريعة وغير مؤلمة نسبيًا لتحميل ورقة الأنماط الخاصة بهم بشكل ثابت ثم استخدام أفروديت لإدارة التخطيط ، وما إلى ذلك؟

ماذا عن تجميع إدخال الخادم مع حزمة الويب باستخدام خيار target: 'node' ؟
سيكون لدينا جميع أدوات تحميل حزمة الويب على جانب الخادم دون الحاجة إلى اختراق العقدة التي تتطلب () أو استخدام أدوات webpack-isomorphic.
أم أن هناك مشكلة كبيرة أو جانب سلبي في هذا النهج لا أراه؟ إلى جانب الحاجة إلى امتلاك ساعتين webpack عند التطوير

تحرير: لقد رأيت للتو أنه يتم إجراؤه بالفعل من أجل المنتج ، ولكن لماذا لا يتم تطويره أيضًا؟