किसी भी मार्ग के लिए index.html की सेवा करने के लिए वेबपैक देव सर्वर को कैसे बताएं

Question

रिएक्ट राउटर प्रतिक्रिया एप्स को संभालने की अनुमति देता है /arbitrary/route। इसे काम करने के लिए, मुझे किसी भी मिलान वाले मार्ग पर रिएक्ट ऐप भेजने के लिए मेरे सर्वर की आवश्यकता है।

लेकिन वेबपैक देव सर्वर मनमाने अंत बिंदुओं को नहीं संभालता है।

अतिरिक्त एक्सप्रेस सर्वर का उपयोग करके यहां एक समाधान है। प्रतिक्रिया-राउटर से प्रवेश बिंदुओं की अनुमति देने के लिए वेबपैक-डेव-सर्वर के लिए कैसे अनुमति दें

लेकिन मैं रूट मेल की अनुमति देने के लिए एक और एक्सप्रेस सर्वर को फायर नहीं करना चाहता। मैं बस किसी भी यूआरएल से मेल करने और मुझे अपना रिएक्शन ऐप भेजने के लिए वेबपैक देव सर्वर को बताना चाहता हूं। कृप्या।

Comments

क्या आपने रिएक्ट राउटर मेगा डेमो देखा है ?

— rojobuffalo

प्रतिक्रिया-राउटर से प्रवेश बिंदुओं की अनुमति देने के लिए वेबपैक-डेव-सर्वर के लिए अनुमति देने के लिए

— Mišo

Answer 1

मुझे एक छोटे से विन्यास को शामिल करने का सबसे आसान समाधान मिला:

  devServer: {
    port: 3000,
    historyApiFallback: {
      index: 'index.html'
    }
  }

मुझे यह देखकर आया : WEBPACK-DEV-SERVER के साथ PUSHSTATE ।

Comments

आप इसे CLI विकल्प के रूप में भी उपयोग कर सकते हैं:--history-api-fallback

— VOND

मुझे नए संस्करण 2 के साथ कुछ इस तरह का उपयोग करना था।devServer: { port: 3000, historyApiFallback: true },

— एड्रियन मोइसा

वास्तव में आपको दोनों “cli” विकल्प का उपयोग करना होगा - --history-api-fallback ”और अपने वेबपैक dev सर्वर कॉन्फ़िगरेशन पर रिज़ॉल्यूशन सेट करें जैसे कि आप इस उत्तर पर बताए गए फ़ाइल को इंडेक्स करते हैं।

— जेसी फिगेरोआ

Answer 2

webpack-dev-server के लिए आधिकारिक प्रलेखन पर historyApiFallback विकल्पस्पष्ट रूप से बताता है कि आप कैसे उपयोग करके प्राप्त कर सकते हैं

historyApiFallback: true

जब रूट नहीं मिलता है तो बस वापस index.html पर आ जाता है

या

// output.publicPath: '/foo-app/'
historyApiFallback: {
  index: '/foo-app/'
}

Comments

अपडेट किया गया लिंक: webpack.js.org/configuration/dev-server/#devserver

— jacob

लेकिन वास्तव में वेबपैक-देव-सर्वर अब रखरखाव में है। यह के उत्तराधिकारी है github.com/webpack-contrib/... , जो समर्थन करता हैhistoryApiFallback

— याकूब

2019 में यह पढ़ किसी के लिए के अनुसार, github.com/webpack-contrib/webpack-serve#webpack-serve webpack-dev-server का उत्तराधिकारी है webpack-serve, नहीं दूसरी तरह के आसपास के रूप में में उल्लेख किया stackoverflow.com/questions/31945763/... ।

— ४५

ur5us की टिप्पणी वास्तव में गलत है। वेबपैक-सर्व, वेबपैक-देव-सर्वर का नियोजित उत्तराधिकारी था। मैं वेबपैक-सर्व का लेखक हूं और वेबपैक-देव-सर्वर का पूर्व अनुचर हूं। जब मैंने कुछ समय निकाला, तो कड़वा ओआरजी सदस्यों ने वेबपैक की सेवा ली, और मैंने तब से इसे अपने कांटे के तहत जारी किया है।

— शेलस्केप

Answer 3

कॉन्फ़िगर करने के लिए सार्वजनिक पथ जोड़ने से वेबपैक को वास्तविक रूट ( /) को समझने में मदद मिलती है , तब भी जब आप सबरूट्स पर होते हैं, जैसे।/article/uuid

इसलिए अपने वेबपैक कॉन्फिगर को संशोधित करें और निम्नलिखित जोड़ें:

output: {
    publicPath: "/"
}

devServer: {
    historyApiFallback: true
}

बिना publicPathसंसाधनों को ठीक से लोड नहीं किया जा सकता है, केवल index.html।

वेबपैक पर परीक्षण किया गया 4.6

कॉन्फिगरेशन का बड़ा हिस्सा (सिर्फ बेहतर तस्वीर लेने के लिए):

entry: "./main.js",
output: {
  publicPath: "/",
  path: path.join(__dirname, "public"),
  filename: "bundle-[hash].js"
},
devServer: {
  host: "domain.local",
  https: true,
  port: 123,
  hot: true,
  contentBase: "./public",
  inline: true,
  disableHostCheck: true,
  historyApiFallback: true
}

Comments

वाह यह मेरे लिए भी काम किया! historyApiFallbackचाल केवल किसी कारण के लिए URL के अंतिम भाग के लिए काम किया। /testकाम करेगा, लेकिन /test/test404 देगा

— ।

के अलावा historyApiFallback: {index: '/'} या historyApiFallback: true(दोनों मेरे लिए काम किया), की स्थापना publicPathभी मेरे मामले (रूटर 5.2) में आवश्यक था।

— मार्कस जूनियस ब्रूटस

Answer 4

मेरे लिए इस तरह काम करता है

devServer: {
    contentBase: "./src",
    hot: true,
    port: 3000,
    historyApiFallback: true

},

दंगा ऐप पर काम कर रहे हैं

Answer 5

के बाद से मैं webpack और चलाने के बाद 'इजेक्ट' विकल्प के साथ कोणीय CLI उपयोग कर रहा हूँ मेरे स्थिति, एक छोटे से अलग था एनजी इजेक्ट आदेश। मैंने पैकेज में 'npm start' के लिए निकाली गई npm स्क्रिप्ट को संशोधित किया। इसे --history-api-fallback ध्वज में पास करना

"स्टार्ट": "वेबपैक-देव-सर्वर --पोर्ट = 4200 --history-api-fallback "

"scripts": {
"ng": "ng",
"start": "webpack-dev-server --port=4200 --history-api-fallback",
"build": "webpack",
"test": "karma start ./karma.conf.js",
"lint": "ng lint",
"e2e": "protractor ./protractor.conf.js",
"prepree2e": "npm start",
"pree2e": "webdriver-manager update --standalone false --gecko false --quiet",
"startold": "webpack-dev-server --inline --progress --port 8080",
"testold": "karma start",
"buildold": "rimraf dist && webpack --config config/webpack.prod.js --progress --profile --bail"},

Answer 6

यदि आप उपयोग webpack-dev-serverकरना चुनते हैं , तो आपको इसका उपयोग अपने संपूर्ण रिएक्ट ऐप की सेवा के लिए नहीं करना चाहिए। आपको अपनी सेवा देने के लिए इसका उपयोग करना चाहिएbundle.js फ़ाइल के साथ-साथ स्थिर निर्भरताओं की । इस स्थिति में, आपको 2 सर्वर शुरू करने होंगे, एक Node.js के प्रवेश बिंदुओं के लिए, जो वास्तव में मार्गों को संसाधित करने और HTML की सेवा करने के लिए जा रहे हैं, और एक बंडल और स्थिर संसाधनों के लिए।

यदि आप वास्तव में एकल सर्वर चाहते हैं, तो आपको अपने ऐप-सर्वर के भीतर वेबपैक-देव-मिडलवेयरwebpack-dev-server का उपयोग करना बंद करना होगा । यह बंडलों को "फ्लाई पर" संसाधित करेगा (मुझे लगता है कि यह कैशिंग और हॉट मॉड्यूल प्रतिस्थापन का समर्थन करता है) और सुनिश्चित करें कि आपके कॉल हमेशा अद्यतित हैं।bundle.js

Comments

मैं वेबपैक-डेव-सर्वर का उपयोग केवल विकास हॉट रीलोडिंग सोर्स मैप्स आदि के लिए कर रहा हूं अन्यथा मेरे पास एक स्थिर वेबसाइट है जहां मैं फाइलों को कहीं से भी होस्ट कर सकता हूं।

— १

Answer 7

जब इस स्थान पर कोई अन्य संसाधन नहीं मिला है, तो आप 404 त्रुटि historyApiFallbackके index.htmlबजाय सेवा करने में सक्षम हो सकते हैं ।

let devServer = new WebpackDevServer(compiler, {
    historyApiFallback: true,
});

यदि आप अलग-अलग यूआरआई के लिए अलग-अलग फाइलें परोसना चाहते हैं, तो आप इस विकल्प में बुनियादी पुनर्लेखन नियम जोड़ सकते हैं। index.htmlअभी भी अन्य रास्तों के लिए सेवा दी जाएगी।

let devServer = new WebpackDevServer(compiler, {
    historyApiFallback: {
        rewrites: [
            { from: /^\/page1/, to: '/page1.html' },
            { from: /^\/page2/, to: '/page2.html' },
            { from: /^\/page3/, to: '/page3.html' },
        ]
    },
});

Answer 8

मुझे पता है कि यह सवाल वेबपैक-देव-सर्वर के लिए है, लेकिन जो कोई भी वेबपैक-सर्व 2.0 का उपयोग करता है । वेबपैक 4.16.5 के साथ ; वेबपैक-सेवा ऐड-ऑन की अनुमति देता है। आपको बनाने की आवश्यकता होगी serve.config.js:

const serve = require('webpack-serve');
const argv = {};
const config = require('./webpack.config.js');

const history = require('connect-history-api-fallback');
const convert = require('koa-connect');

serve(argv, { config }).then((result) => {
  server.on('listening', ({ server, options }) => {
      options.add: (app, middleware, options) => {

          // HistoryApiFallback
          const historyOptions = {
              // ... configure options
          };

          app.use(convert(history(historyOptions)));
      }
  });
});

संदर्भ

आप से देव स्क्रिप्ट बदलने के लिए की आवश्यकता होगी webpack-serveकरने के लिए node serve.config.js।

Answer 9

मेरे लिए मेरे पास डॉट्स थे "।" मेरे पथ जैसे कि /orgs.csvइसलिए मुझे इसे अपने वेबपैक में डालना था।

devServer: {
  historyApiFallback: {
    disableDotRule: true,
  },
},

Answer 10

मैं मौजूदा उत्तरों के बहुमत से सहमत हूं।

एक मुख्य बात जिसका मैं उल्लेख करना चाहता था, यदि आप मुद्दों को तब मारते हैं जब पृष्ठों को गहरे रास्तों पर मैन्युअल रूप से पुनः लोड करते हैं, जहां यह सभी को रखता है, लेकिन पथ का अंतिम भाग और आपकी jsबंडल फ़ाइल के नाम पर आपको अतिरिक्त सेटिंग की आवश्यकता होती है (विशेष रूप से)publicPath सेटिंग) )।

उदाहरण के लिए, यदि मेरे पास एक पथ है /foo/barऔर मेरी बंडलर फ़ाइल कहलाती है bundle.js। जब मैं मैन्युअल रूप से पृष्ठ को रीफ्रेश करने का प्रयास करता हूं तो मुझे एक 404 मिलता है जिसमें कहा /foo/bundle.jsनहीं जा सकता है। दिलचस्प है कि यदि आप पथ से पुनः लोड करने का प्रयास करते हैं/foo कोई समस्या नहीं दिखती है (यह इसलिए है क्योंकि यह इसे संभालती है)।

webpackसमस्या को ठीक करने के लिए अपने मौजूदा कॉन्फ़िगरेशन के साथ नीचे दिए गए संयोजन का उपयोग करने का प्रयास करें । output.publicPathमुख्य टुकड़ा है!

output: {
    filename: 'bundle.js',
    publicPath: '/',
    path: path.resolve(__dirname, 'public')
},
...
devServer: {
    historyApiFallback: true
}