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

Question

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

但是webpack dev服务器不处理任意端点.

这里有一个使用附加快速服务器的解决方案. 如何允许webpack-dev-server允许来自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-服务器清楚地解释了如何可以通过使用实现

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标志

"开始":"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理解真正的root(/),即使你在子路由上,例如./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,另一个用于bundle和静态资源.

如果您真的想要一台服务器,则必须停止使用该应用程序服务器webpack-dev-server并开始使用webpack-dev-middleware.它将"动态"处理捆绑包(我认为它支持缓存和热模块替换)并确保您的呼叫bundle.js始终是最新的.

Answer 7

当在此位置未找到其他资源时，您可以启用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' },
        ]
    },
});

Answer 8

对我来说，我有点“。” 在我的路径中，例如，/orgs.csv所以我不得不把它放在我的 webpack 配置中。

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

Answer 9

我同意大多数现有答案。

我想提到的一个关键事情是，如果您在更深的路径上手动重新加载页面时遇到问题，它保留了路径的最后一部分之外的所有内容并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
}