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 का उपयोग किया जा सकता है

धन्यवाद फिर से जारेड, किसी भी दिशा, बॉयलरप्लेट या वेबपैक कॉन्फ़िगरेशन जो आप प्रदान कर सकते हैं वह बहुत सराहना की जाएगी, और मुझे एक पीआर सबमिट करने में खुशी होगी यदि यह कुछ ऐसा है जिसे आप स्टार्टर में जोड़ना चाहते हैं

मुझे शक है कि मैं शायद एक सुपर सरल समाधान की अनदेखी कर रहा हूं .... फिर से धन्यवाद !! :)

आप सभी को 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'
      }
      ...

फिर आप उन्हें ठीक उसी तरह की आवश्यकता कर सकते हैं जैसा आपने ऊपर वर्णित किया है। BTW सीमा पैरामीटर सिर्फ url-loader बताता है कि किस सीमा पर वास्तव में एक छवि उत्पन्न करनी चाहिए जो डेटा-यूआरआई बना सकती है।

संपादित करें:

वेबपैक सर्वर कॉन्फिगर से new webpack.IgnorePlugin(/\.(css|less|scss|svg|png|jpe?g|png)$/), भी निकालें।

प्रतिक्रिया के लिए @jaredpalmer धन्यवाद :) यह बिल्कुल वही मुद्दा है जिसमें मैं भाग रहा था ... जैसे मैंने कहा, मैं https://www.npmjs.com/package/webpack-isomorphic-tools का उपयोग करके हल करने में सक्षम था, लेकिन यह वास्तव में लगता है बहुत भद्दी ...

@ rowellx68 आपने इमेज-वेबपैक-लोडर का उपयोग करके उल्लेख किया है - क्या आप शायद विस्तृत कर सकते हैं?

@ 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
            }
          })
        ]
      },

मैं अभी भी फोंट और svg के साथ url-loader उपयोग करूंगा।

@ rowellx68 @ b2what हमें url-loader साथ इसके लिए PR बनाना चाहिए? देव में require.extension डाउनसाइड क्या हैं? यह बदसूरत है, लेकिन सर्वर को केवल आईएमएचओ के लिए बंडल करने की तुलना में क्लीनर है। 🤔

@jaredpalmer re: पैचिंग को वर्कअराउंड की आवश्यकता है, यह एक दिलचस्प दृष्टिकोण है ... इसलिए मैन्युअल रूप से पंजीकरण की आवश्यकता के साथ ही मॉड्यूल url-loader हिट करने की अनुमति देता है, समझ में आता है!

पुन: छवि-वेबपैक, वह मेरी समझ (वास्तव में एक अनुकूलन) थी, लेकिन मुझे लगा कि शायद कुछ ऐसा था जो मुझे नोड के उपयोग के लिए याद आ रहा था क्योंकि @ rowellx68 ने कहा कि वह इसे छवियों के लिए उपयोग कर रहा था

एक बार फिर धन्यवाद!

@jaredpalmer require.extensions पदावनत किया गया लगता है?

@justingreenberg re: image-webpack-loader । यह वास्तव में मुख्य रूप से छवियों के अनुकूलन के लिए है। हालाँकि, परिणामी छवियाँ assest.json में नहीं जोड़ी गईं।

@ rowellx68
हम स्लाइस देव और ठेस मोड की जरूरत है। webpack config अलग हो सकता है। देव मोड में हमें सर्वर से छवि के सामान्य यूआरएल प्राप्त करने की आवश्यकता होती है। ठेस मोड में हम किसी भी अनुकूलन का उपयोग कर सकते हैं

मैंने बिल्ड स्क्रिप्ट को संशोधित किया है। अब आपके लिए robots.txt, favicon आदि के लिए एक pbulic फ़ोल्डर है। यह "सही समाधान" नहीं है, लेकिन यह काम करता है। बंडल्स जेएस -> public/assets (जो गिट में चेक नहीं किया गया है)।

के requireHooks समाधान @justingreenberg का पता लगाने के रूप में है कि इनलाइन करने और कैश पर्दाफाश के लिए अनुमति होगी होगा।

हे सब, मुझे पता है कि अगर यह दायरे से बाहर है, लेकिन स्थैतिक संपत्ति चर्चा कुछ प्रासंगिक लग रहा था।

मैं कोई ऐसा व्यक्ति हूं जो वेबपैक दुनिया में काफी नया है (पढ़ें: कोई सुराग नहीं कि इसे अभी तक कैसे इस्तेमाल किया जाए) और मैं इस परियोजना का उपयोग क्लाइंट की स्टाइल गाइड का उपयोग करके वेब ऐप बनाने के लिए कर रहा हूं। सीएसएस शैलियों को फिर से लागू करने के बजाय मैं एक सीएसएस फ़ाइल को लोड करने की कोशिश कर रहा हूं जिसमें क्लाइंट की शैली मार्गदर्शिका है। क्या उनकी स्टाइलशीट को सांख्यिकीय रूप से लोड करने के लिए एक त्वरित और अपेक्षाकृत दर्द रहित तरीका है और फिर लेआउट, आदि का प्रबंधन करने के लिए एफ्रोसाइट का उपयोग करें?

target: 'node' विकल्प का उपयोग करके वेबपैक के साथ सर्वर प्रविष्टि को बंडल करने के बारे में क्या?
हमारे पास नोड की आवश्यकता () का उपयोग करने या वेबपैक-आइसोमॉर्फिक-टूल्स को हैक करने की आवश्यकता के बिना सर्वर की तरफ सभी वेबपैक लोडर अच्छाई होगी।
या इस दृष्टिकोण पर एक बड़ी समस्या या नकारात्मक पहलू है जो मैं नहीं देख रहा हूं? विकसित करने के लिए दो वेबपैक घड़ियों की आवश्यकता होती है

संपादित करें: बस देखा कि यह पहले से ही ठेस के लिए किया जा रहा है, लेकिन देव भी क्यों नहीं?