Question

React路由器允许反应应用处理/arbitrary/route。为了实现这一点，我需要我的服务器在任何匹配的路由上发送React应用程序。

但webpack dev server无法处理任意终点。

这里有一个解决方案，使用额外的快递服务器。 How to allow for webpack-dev-server to allow entry points from react-router

但我不想启动另一个快速服务器以允许路由匹配。我只是想告诉webpack dev服务器匹配任何网址并发送给我我的反应应用程序。请。

Answer 1

我找到了最简单的解决方案，包括一个小配置：

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

我通过访问http://jaketrent.com/post/pushstate-webpack-dev-server/

找到了这个

Answer 2

historyApiFallback官方文档上的

webpack-dev-server 选项清楚地解释了如何使用

historyApiFallback: true

当找不到路线时，它会简单地回到index.html

或

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

Answer 3

像我一样为我工作

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

},

使用防暴应用程序

Answer 4

我的情况有点不同，因为我在运行ng eject命令后使用带有webpack的角度CLI和'eject'选项。我在package.json中为'npm start'修改了弹出的npm脚本，以传入--history-api-fallback标志

“start”：“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"},

Answer 5

添加配置的公共路径有助于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
}

Answer 6

如果您选择使用webpack-dev-server，则不应将其用于整个React应用。您应该使用它来提供bundle.js文件以及静态依赖项。在这种情况下，您必须启动2个服务器，一个用于Node.js入口点，实际上将处理路由并提供HTML，另一个用于捆绑和静态资源。

如果您真的想要一台服务器，则必须停止使用webpack-dev-server并开始使用app-server中的webpack-dev-middleware。它将“动态”处理捆绑包（我认为它支持缓存和热模块替换）并确保您对bundle.js的呼叫始终是最新的。

Answer 7

如果在此位置找不到其他资源，您可以启用historyApiFallback来提供index.html而不是404错误。

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' },
        ]
    },
});

Answer 8

我知道这个问题是针对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)));
      }
  });
});

Reference

您需要将开发脚本从webpack-serve更改为node serve.config.js。

Answer 9

对我来说，我有点“。”在我的道路上/orgs.csv，所以我不得不将其放入Webpack confg。

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
}

如何告诉webpack dev服务器为任何路由提供index.html

10 个答案: