যে কোনও রুটের জন্য সূচক। Html পরিবেশন করতে ওয়েবপ্যাক ডেভ সার্ভারকে কীভাবে বলতে হয়

Question

প্রতিক্রিয়া রাউটার অ্যাপ্লিকেশনগুলি পরিচালনা করতে দেয় /arbitrary/route। এটি কাজ করার জন্য, আমার সার্ভারটি কোনও মিলিত রুটে প্রতিক্রিয়া অ্যাপ্লিকেশন প্রেরণ করা দরকার।

তবে ওয়েবপ্যাক ডেভ সার্ভার স্বেচ্ছাসেদী পয়েন্টগুলি পরিচালনা করে না।

অতিরিক্ত এক্সপ্রেস সার্ভার ব্যবহার করে এখানে একটি সমাধান রয়েছে। ওয়েবপ্যাক-ডেভ-সার্ভারকে কীভাবে বিক্রিয়া-রাউটার থেকে প্রবেশের পয়েন্টগুলি মঞ্জুরি দেবে

তবে রুট মিলের অনুমতি দেওয়ার জন্য আমি আর একটি এক্সপ্রেস সার্ভার চালিত করতে চাই না। আমি কেবল ওয়েবপ্যাক ডেভ সার্ভারকে বলতে চাই যে কোনও ইউআরএল মেলে এবং আমাকে আমার প্রতিক্রিয়া অ্যাপটি প্রেরণ করুন। অনুগ্রহ.

Comments

আপনি কি প্রতিক্রিয়া রাউটার মেগা ডেমো দেখেছেন ?

— rojobuffalo

বিক্রিয়া-রাউটার থেকে ওয়েবপ্যাক-ডেভ-সার্ভারকে প্রবেশের পয়েন্টগুলি মঞ্জুরি দেওয়ার কীভাবে তার

— Mišo

Answer 1

আমি একটি ছোট কনফিগারেশন অন্তর্ভুক্ত করার সবচেয়ে সহজ সমাধানটি পেয়েছি:

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

আমি এখানে গিয়ে দেখেছি : ওয়েবপ্যাক-ডেভ সার্ভারের সাথে পুস্টেস্টেট ।

Comments

আপনি এটিকে সিএলআই বিকল্প হিসাবেও ব্যবহার করতে পারেন:--history-api-fallback

— ভনডি

আমাকে নতুন সংস্করণ ২ সহ এরকম কিছু ব্যবহার করতে হয়েছিলdevServer: { port: 3000, historyApiFallback: true },

— অ্যাড্রিয়ান মোইসা

প্রকৃতপক্ষে আপনাকে উভয় ক্লাইম বিকল্প "--history-api-fallback" ব্যবহার করতে হবে এবং আপনার ওয়েবপ্যাকে ডেভ সার্ভার কনফিগারেশন আপনাকে উপরের উত্তরটিতে বর্ণিত মত সূচি ফাইলটি রেজোলিউশন সেট করে।

— জেসি ফিগুয়েরো

Answer 2

ইতিহাস ওয়েবপ্যাক-ডেভ-সার্ভারের জন্য অফিসিয়াল ডকুমেন্টেশনের এপিআইফ্যালব্যাক বিকল্পটিপরিষ্কারভাবে ব্যাখ্যা করে যে আপনি কীভাবে কোনওটি ব্যবহার করে অর্জন করতে পারবেন

historyApiFallback: true

যখন রুটটি খুঁজে পাওয়া যায় না তখন যা কেবল সূচক HTML এ ফিরে যায়

অথবা

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

Comments

আপডেট হওয়া লিঙ্ক: webpack.js.org/configration/dev-server/#devserver

— জ্যাকব

তবে আসলে ওয়েবপ্যাক-ডেভ-সার্ভার এখন রক্ষণাবেক্ষণে রয়েছে। এটির উত্তরসূরি github.com/webpack-contrib/… , যা সমর্থন করেhistoryApiFallback

— জ্যাকব

2019 সালে এই পড়া কারো জন্য অনুযায়ী, github.com/webpack-contrib/webpack-serve#webpack-serve webpack-dev-server উত্তরসূরি হয় webpack-serveনা অন্যান্য উপায় কাছাকাছি যেমন উল্লেখ stackoverflow.com/questions/31945763/... ।

— ur5us

ur5us এর মন্তব্যটি আসলে মিথ্যা। ওয়েবপ্যাক-সার্ভ ছিল ওয়েবপ্যাক-ডেভ-সার্ভারের পরিকল্পিত উত্তরসূরি। আমি ওয়েবপ্যাক-পরিবেশনার লেখক এবং ওয়েবপ্যাক-ডেভ-সার্ভারের প্রাক্তন রক্ষণাবেক্ষণকারী। যখন আমি কিছুটা সময় নিলাম, তিক্ত সংগঠনের সদস্যরা ওয়েবপ্যাক-পরিবেশনাকে অবমূল্যায়ন করেছিলেন এবং আমি তখন থেকে এটি আমার কাঁটাচামচির অধীনে প্রকাশ করেছি।

— শেলস্কেপ

Answer 3

কনফিগারারে পাবলিক পাথ যুক্ত করা ওয়েবপ্যাককে সত্যিকারের রুটটি বুঝতে সহায়তা করে ( /এমনকি আপনি সাব্রোবাইটে থাকা অবস্থায়ও যেমন।/article/uuid

সুতরাং আপনার ওয়েবপ্যাক কনফিগার করুন এবং নিম্নলিখিত যুক্ত করুন:

output: {
    publicPath: "/"
}

devServer: {
    historyApiFallback: true
}

publicPathসংস্থানগুলি ছাড়া সঠিকভাবে লোড করা যায় না, কেবল সূচিপত্র 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

আমার পরিস্থিতি কিছুটা আলাদা ছিল, যেহেতু আমি এনজি ইজেক্ট কমান্ড চালানোর পরে কৌনিক সি এল আই ওয়েবপ্যাক এবং 'ইজেক্ট' বিকল্পটি ব্যবহার করছি । আমি ইতিহাস - এপিআই-ফ্যালব্যাক পতাকাটি পাস করার জন্য প্যাকেজ.জেএসনে 'এনপিএম স্টার্ট' এর জন্য বহিষ্কারকৃত এনএমপি স্ক্রিপ্টটি পরিবর্তন করেছি

"শুরু": "ওয়েবপ্যাক-দেব-সার্ভার --port = 4200 - ইতিহাস-এপি-ফ্যালব্যাক "

"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 সার্ভার শুরু করতে হবে, একটি নোড.জেএস এন্ট্রি পয়েন্টগুলির জন্য, যা প্রকৃতপক্ষে রুটগুলি প্রক্রিয়া করতে এবং এইচটিএমএল পরিবেশন করতে চলেছে, এবং অন্য একটি বান্ডিল এবং স্থির সংস্থানগুলির জন্য।

আপনি যদি সত্যিই একটি একক সার্ভার চান তবে আপনার অ্যাপ্লিকেশন-সার্ভারের মধ্যে আপনাকে ওয়েবপ্যাক-ডেভ-মিডলওয়্যারটিwebpack-dev-server ব্যবহার শুরু করতে হবে । এটি "ফ্লাইতে" বান্ডিলগুলি প্রক্রিয়া করবে (আমার মনে হয় এটি ক্যাচিং এবং হট মডিউল প্রতিস্থাপনকে সমর্থন করে) এবং আপনার কলগুলি সর্বদা আপ টু ডেট রয়েছে তা নিশ্চিত করে ।bundle.js

Comments

আমি কেবল ওয়েব হ্যাক রিলোডিং উত্সের মানচিত্র ইত্যাদির জন্য ওয়েবপ্যাক-ডেভ-সার্ভার ব্যবহার করছি নাহলে আমার একটি স্থির ওয়েবসাইট রয়েছে যেখানে আমি কোথাও থেকে ফাইলগুলি হোস্ট করতে পারি।

— উদাহরণস্বরূপ 11'15

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 ব্যবহার করেন। সঙ্গে webpack 4.16.5 ; ওয়েবপ্যাক-পরিবেশন অ্যাড-অন্সের অনুমতি দেয় You আপনাকে তৈরি করতে হবে 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

আমি বিদ্যমান উত্তরগুলির বেশিরভাগের সাথে একমত।

একটি মূল বিষয় আমি উল্লেখ করতে চাইছিলাম হ'ল আপনি যদি গভীর পাথগুলিতে ম্যানুয়ালি পৃষ্ঠাগুলি পুনরায় লোড করার সময় সমস্যাগুলি হিট করেন তবে এটি পথের শেষ অংশটি রাখে এবং আপনার বান্ডিল ফাইলের নামে সম্ভবত আপনার অতিরিক্ত সেটিং প্রয়োজন (বিশেষতjspublicPath সেটিংস) )।

উদাহরণস্বরূপ, যদি আমার কোনও পথ থাকে /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
}