web-dev-qa-db-ja.com

任意のルートでindex.htmlを提供するようにwebpack devサーバーに指示する方法

Reactルーターは、reactアプリが/arbitrary/routeを処理できるようにします。これが機能するためには、一致するルートでReactアプリを送信するサーバーが必要です。

しかし webpack dev server は任意のエンドポイントを処理しません。

追加のエクスプレスサーバーを使用するソリューションがあります。 webpack-dev-serverがreact-routerからのエントリポイントを許可する方法

しかし、ルートマッチングを許可するために別のエクスプレスサーバーを起動したくありません。任意のURLに一致するようにwebpack devサーバーに指示して、reactアプリを送信したいだけです。お願いします。

reactjsecmascript-6webpackreact-router
113
eguneys

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

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

私はこれを訪問して見つけました： http://jaketrent.com/post/pushstate-webpack-dev-server/

136
cmfolio

- historyApiFallbackwebpack-dev-server の公式ドキュメントのオプションは、を使用して

historyApiFallback: true

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

または

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

ng eject コマンドを実行した後、webpackおよび 'eject'オプションでangular CLIを使用しているため、私の状況は少し異なりました。 package.jsonの 'npm start'のイジェクトされたnpmスクリプトを変更して、-history-api-fallbackフラグを渡します

「開始」：「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"},
14
Brandon Søren Culley

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

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

},

暴動のアプリでの作業

14
user2088033

パブリックパスをconfigに追加すると、webpackがサブルートにいるときでも、実際のルート（/）を理解するのに役立ちます。 /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
}
9
Jurosh

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

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

6
André Pena

historyApiFallback を有効にすると、この場所に他のリソースが見つからない場合に404​​エラーの代わりに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' },
        ]
    },
});
3
JojOatXGME

私はこの質問がwebpack-dev-server用であることを知っていますが、webpack-serve 2.0を使用する人のために。with 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)));
      }
  });
});

参照

Devスクリプトをwebpack-serveからnode serve.config.jsに変更する必要があります。

2
shmotam

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

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