वेबपैक अलग फ़ाइल प्रकार के लिए अलग लोडर चेन

Question

एक ही एक्सटेंशन के लिए दो अलग लोडर श्रृंखला चलाने के लिए संभव है?

मेरे मामले में, मैं लोडर का एक सेट चलाने के लिए एक स्थिर फ़ाइल का निर्माण करना चाहते है, और दूसरा (सर्वर साइड प्रतिपादन के लिए) फ़ाइलों का एक अलग सेट लिखने के

{ 
    test: /\.p?css$/, 
    use: ExtractTextPlugin.extract([ "css-loader", "postcss-loader" ]), 
    }, 
    { 
    test: /\.p?css$/, 
    use: [ 
     { 
     loader: "emit-file-loader", 
     options: { 
      name: "dist/[path][name].pcss", 
     }, 
     }, 
     { 
     loader: "skeleton-loader", 
     options: { 
      procedure: function (content) { 
      return `module.exports = ${content}` 
      }, 
     }, 
     }, 
     "postcss-loader", 
    ]), 
    } 

लेकिन What is the loader order for webpack? के अनुसार ऐसा लगता है सभी लोडरों को एक ही श्रृंखला में चलाने के लिए, भले ही उन्हें अलग-अलग नियमों में परिभाषित किया गया हो।

शायद मैं लोडर को पूरी तरह से समझ नहीं रहा हूं, लेकिन क्या लोडर के प्रत्येक सेट (use सूची) को स्वतंत्र रूप से चलाने का कोई तरीका है?

Answer 1

आप प्रत्येक नियम पर नियमित अभिव्यक्ति का उपयोग कर include and exclude फ़ाइलों को कर सकते हैं।

प्रलेखन के कंडीशन अनुभाग में, वे उन गुणों को स्वीकार करने वाले कुछ संभावित मान सूचीबद्ध करते हैं। यहाँ कुछ मुझे लगता है कि आप मदद कर सकता है:

• एक स्ट्रिंग: इनपुट से मेल करने के लिए प्रदान की तार के साथ शुरू करनी चाहिए। अर्थात। एक पूर्ण निर्देशिका पथ, या फ़ाइल के लिए पूर्ण पथ।
• ए RegExp: यह इनपुट के साथ परीक्षण किया जाता है।
• एक समारोह: इसे इनपुट के साथ बुलाया जाता है और मैच के लिए एक सच्चा मूल्य वापस करना होगा।

मैं एक परियोजना में RegExp दृष्टिकोण का उपयोग किया है, किसी विशिष्ट फ़ोल्डर में विशेष मामले को अलग। तो वेबपैक कॉन्फ़िगरेशन में मैंने नियमों के एक सेट में फ़ोल्डर को शामिल किया और दूसरे से बाहर रखा। उदाहरण के लिए:

{ 
    test: /\.p?css$/, 
    include: /specific_folder/, 
    use: ExtractTextPlugin.extract([ "css-loader", "postcss-loader" ]) 
}, 
{ 
    test: /\.p?css$/, 
    exclude: /specific_folder/, 
    use: [ ... ] 
} 

Answer 2

मैंने पाया एक लोडर डायन अपने मामले multi loader के लिए सबसे अच्छा सूट है। इस लोडर को एक मॉड्यूल की आवश्यकता होती है, प्रत्येक बार एक अलग लोडर के साथ लोड किया जाता है। एक बहु प्रवेश बिंदु की तरह अंतिम आइटम के निर्यात निर्यात कर रहे हैं।

var multi = require("multi-loader"); 
{ 
    module: { 
     loaders: [ 
      { 
       test: /\.css$/, 
       // Add CSS to the DOM 
       // and 
       // Return the raw content 
       loader: multi(
        "style-loader!css-loader!autoprefixer-loader", 
        "raw-loader" 
       ) 
      } 
     ] 
    } 
} 

या आप दो बार में इनलाइन लोडर का उपयोग कर एक ही फाइल की आवश्यकता होती है सकते हैं की तरह this

import Styles from 'style-loader!css-loader?modules!./styles.css'; 
import Styles from 'xyz-loader!sass-loader?modules!./styles.css'; 

बयान की आवश्यकता होती है और आप क्वेरी के रूप में configration विकल्प दे सकते हैं।

इसके अलावा आपको लगता है कि लेखन लोडर-नाम और configration के इस

कॉन्फ़िग फ़ाइल में

की तरह हर बार insted लोडर-नाम और configration और उपयोग के लिए अन्य नाम बना सकते हैं

resolveLoader: { 
    alias: { 
    myLoader1: "style-loader!css-loader?modules", // and much more 
    myLoader2: "xyz-loader!sass-loader?modules" // and much more 
    } 
} 

आयात पर

import Styles from 'myLoader1!./styles.css'; 
import Styles from 'myLoader2!./styles.css';