どのルートでもindex.htmlを提供するようにwebpack開発サーバーに指示する方法

Reactルーターを使用すると、reactアプリで処理できます/arbitrary/route。これを機能させるには、一致するルートでReactアプリを送信するサーバーが必要です。

しかし、webpack開発サーバーは任意のエンドポイントを処理しません。

追加の高速サーバーを使用するソリューションがあります。 webpack-dev-serverがreact-routerからのエントリポイントを許可できるようにする方法

しかし、ルートマッチングを可能にするために別のExpressサーバーを起動したくありません。Webpack開発サーバーに任意のURLに一致するように伝え、反応アプリを送信したいだけです。お願いします。

私は小さな設定を含める最も簡単な解決策を見つけました：

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

私はこれを見つけて見つけました：PUSHSTATE WITH WEBPACK-DEV-SERVER。

webpack -dev-serverの公式ドキュメントの historyApiFallbackオプションは、次のコマンドを使用してどちらを実現できるかを明確に説明しています

historyApiFallback: true

ルートが見つからない場合は、単にindex.htmlにフォールバックします

または

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

configにパブリックパスを追加/すると、サブルート（例：/article/uuid

だからあなたのwebpack設定を変更し、以下を追加します：

output: {
    publicPath: "/"
}

devServer: {
    historyApiFallback: true
}

publicPathリソースがなければ、index.htmlのみが正しくロードされない可能性があります。

Webpackでテスト済み 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
}

このように私のために働く

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

},

暴動アプリに取り組んで

私の状況は少し異なっていました。ng 排出コマンドを実行した後、webpackと 'eject'オプションで角度CLIを使用しているからです。--history-api-fallbackフラグを渡すように、package.jsonの「npm start」の排出されたnpmスクリプトを変更しました

「開始」：「webpack-dev-server --port = 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"},

を使用するwebpack-dev-server場合は、Reactアプリ全体を提供するために使用しないでください。bundle.jsファイルと静的依存関係を提供するために使用する必要があります。この場合、2つのサーバーを開始する必要があります。1つは実際にルートを処理してHTMLを提供するNode.jsエントリーポイント用で、もう1つはバンドルと静的リソース用です。

本当に単一のサーバーが必要な場合は、の使用を停止し、アプリサーバー内でwebpack-dev-middlewareのwebpack-dev-server使用を開始する必要があります。「オンザフライ」でバンドルを処理し（キャッシュとホットモジュールの交換をサポートしていると思います）、への呼び出しbundle.jsが常に最新であることを確認します。

この場所に他のリソースが見つからない場合は、404エラーの代わりhistoryApiFallbackにサービスを提供できるようにすることができindex.htmlます。

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

異なるURIに異なるファイルを提供する場合は、このオプションに基本的な書き換えルールを追加できます。index.htmlまだ他のパスのために提供されます。

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

この質問がwebpack-dev-serverに関するものであることは知っていますが、webpack-serve 2.0を使用するすべての人に対するものです。WebPACKの4.16.5。webpack-serveはアドオンを許可します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ます。

私にはドット「。」がありました。私のパスでは、たとえば/orgs.csv、これを私のwebpack設定に入れなければなりませんでした。

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

既存の回答の大部分に同意します。

私が言及したい重要なことの1つは、パスの最後のセクションを除くすべてを保持し、バンドルファイルの名前を追加する、より深いパスでページを手動で再読み込みするときに問題が発生した場合、おそらく追加の設定（特に設定）が必要です。 ）。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
}