webpack
विकास सर्वर: वेबपैक-देव-सर्वर

स्थापना

webpack-dev-server को npm माध्यम से स्थापित किया जा सकता है

npm --save-dev webpack-dev-server

अब आप सर्वर शुरू कर सकते हैं

./node_modules/.bin/webpack-dev-server

उपयोग को सरल बनाने के लिए आप स्क्रिप्ट को package.json जोड़ सकते हैं

// package.json
{
  ...
  "scripts": {
    "start": "webpack-dev-server"
  },
  ...
}

अब सर्वर चलाने के लिए आप उपयोग कर सकते हैं

npm run start

webpack-dev-server को webpack.config.js फ़ाइल में खंड devServer में कॉन्फ़िगर किया गया है।

सर्वर सामग्री आधार निर्देशिका को बदलने के लिए आप विकल्प contentBase उपयोग कर सकते हैं। उदाहरण कॉन्फ़िगरेशन public_html रूट डायरेक्टरी की तरह दिख सकता है

let path = require("path");

module.exports = {
  ...
  devServer: {
    contentBase: path.resolve(__dirname, "public_html")
  },
  ...
}

प्रॉक्सी का उपयोग करना

webpack-dev-server कुछ अनुरोधों को अन्य सर्वरों पर प्रॉक्सी कर सकता है। जब आप उसी डोमेन पर अनुरोध भेजना चाहते हैं तो एपीआई क्लाइंट को विकसित करने के लिए यह उपयोगी हो सकता है।

प्रॉक्सी को proxy पैरामीटर के माध्यम से कॉन्फ़िगर किया गया है।

पोर्ट 8080 पर सुनने वाली अन्य सेवा के लिए /api से गुजरने वाले देव सर्वर के उदाहरण विन्यास इस तरह दिख सकते हैं

// webpack.config.js
module.exports = {
  ...
  devServer: {
    proxy: {
      "/api": {
        target: "http://localhost:8080"
      }
    }
  }
...
}

पुनर्लेखन

pathRewrite विकल्प का उपयोग करके गंतव्य पथ को फिर से लिखना संभव है।

मान लें कि आप पिछले उदाहरण से पट्टी /api उपसर्ग करना चाहते हैं, तो आपका कॉन्फिगर कैसा दिख सकता है

// webpack.config.js
  ...
  devServer: {
    proxy: {
      "/api": {
        target: "http://localhost:8080",
        pathRewrite: {"^/api" : ""}
      }
    }
  }
...

अनुरोध /api/user/256 को http://localhost:8080/user/256 परिवर्तित किया जाएगा।

फिल्टर

केवल कुछ अनुरोधों को प्रॉक्सी करना संभव है। bypass आपको फ़ंक्शन प्रदान करने की अनुमति देता है जो वापसी मूल्य निर्धारित करेगा कि क्या अनुरोध को अनुमानित किया जाना चाहिए या नहीं।

यह मानकर कि आप केवल POST अनुरोधों को /api लिए प्रॉक्सी करना चाहते हैं और webpack संभाल कर रखें, बाकी आपके कॉन्फ़िगरेशन इस तरह दिख सकते हैं

// webpack.config.js
  ...
  devServer: {
    proxy: {
      "/api": {
        target: "http://localhost:8080",
        bypass: function(req, res, proxyOptions) {
          if(req.method != 'POST') return false;
        }
      }
    }
  }
...