webpack
लोडर और प्लगइन्स

टिप्पणियों

लोडर के साथ शुरुआत करना

शुरू करने के लिए, npm install आपकी परियोजना के लिए वांछित लोडर npm install करता है।

कॉन्फ़िगरेशन ऑब्जेक्ट के अंदर जो webpack.config.js में निर्यात किया जा रहा है, एक module प्रॉपर्टी आपके सभी लोडर को रखेगा।

const source = `${__dirname}/client/src/`;

module.exports = {
  // other settings here
  
  module: {
    loaders: [
          {
            test: /\.jsx?$/,
            include: source,
            loaders: ['babel?presets[]=es2015,presets[]=react', 'eslint']
          },
          {
            test: /\.s?css$/,
            include: source,
            loaders: ['style', 'css', 'autoprefixer', 'sass']
          }
        ]
  },
};

उपरोक्त कॉन्फ़िगरेशन में, हम अपने लोडरों के लिए तीन बुनियादी सेटिंग्स का उपयोग कर रहे हैं:

• परीक्षण: यह वह जगह है जहां हम लोडरों को RegExp का उपयोग करके विशिष्ट एक्सटेंशन से बांधते हैं। लोडर के पहले सेट को सभी .js और .jsx फ़ाइलों पर निष्पादित किया जा रहा है। दूसरे सेट को सभी .css और .scss फ़ाइलों पर निष्पादित किया जा रहा है।
• शामिल करें: यह वह निर्देशिका है जिसे हम चाहते हैं कि हमारे लोडर चलें। वैकल्पिक रूप से, हम केवल exclude निर्देशिकाओं को परिभाषित करने के लिए आसानी से exclude संपत्ति का उपयोग कर सकते हैं जिन्हें हम शामिल नहीं करना चाहते हैं।
• लोडर: यह उन सभी लोडरों की एक सूची है, जिन्हें हम test और निर्दिष्ट फाइलों में चलाना चाहते include ।

यह ध्यान रखना महत्वपूर्ण है कि लोडर को प्रत्येक लोडर सरणी में दाएं से बाएं और व्यक्तिगत परिभाषाओं में नीचे से ऊपर तक निष्पादित किया जाता है। नीचे दिए गए कोड लोडरों को निम्नलिखित क्रम में निष्पादित करेंगे: sass, autoprefixer, css, style ।

loaders: [
  {
    test: /\.s?css$/,
    include: source,
    loaders: ['style', 'css', 'autoprefixer']
  },
  {
    test: /\.s?css$/,
    include: source,
    loaders: ['sass']
  }
]

यह उन डेवलपर्स के लिए भ्रम और बग का एक सामान्य स्रोत है जो वेबपैक के लिए नए हैं। उदाहरण के लिए, JSX और ES6 सिंटैक्स का उपयोग करते समय, हम उस कोड को लिंट करना चाहते हैं, न कि संकलित कोड को लिंट करना जो हमारे बबल लोडर द्वारा प्रदान किया गया है। इसलिए, हमारे एस्लिंट लोडर को हमारे बैबल लोडर के दाईं ओर रखा जाता है।

-loader प्रत्यय वैकल्पिक जब हमारे लोडर लिस्टिंग है।

loaders: ['sass']

... के बराबर है:

loaders: ['sass-loader']

वैकल्पिक रूप से, आप loader प्रॉपर्टी (एकवचन) के साथ-साथ लोडर्स की सूची को अलग करने वाली स्ट्रिंग का उपयोग कर सकते हैं ! चरित्र।

loaders: ['style', 'css']

... के बराबर है:

loader: "style!css"

टाइपिंग फ़ाइलें लोड कर रहा है

वेबपैक के साथ टाइपस्क्रिप्ट का उपयोग करने के लिए आपको typescript और ts-loader स्थापित करने की आवश्यकता है

npm --save-dev install typescript ts-loader

अब आप टाइपस्क्रिप्ट फ़ाइलों का उपयोग करने के लिए वेबपैक कॉन्फ़िगर कर सकते हैं

// webpack.config.js

module.exports = {
  ..
  resolve: {
    // .js is required for react imports.
    // .tsx is required for react tsx files.
    // .ts is optional, in case you will be importing any regular ts files.
    extensions: ['.js', '.ts', '.tsx']
  },
  module: {
    rules: [
      {
        // Set up ts-loader for .ts/.tsx files and exclude any imports from node_modules.
        test: /\.tsx?$/,
        loaders: isProduction ? ['ts-loader'] : ['react-hot-loader', 'ts-loader'],
        exclude: /node_modules/
      }
    ]
  },
  ...
};