首页 文章

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

提问于
浏览 次
97

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

但webpack dev server不处理任意 endpoints .

这里有一个使用附加快速服务器的解决方案 . How to allow for webpack-dev-server to allow entry points from react-router

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

reactjs ecmascript-6 webpack react-router

8 回答

  • 124

    我发现包含一个小配置的最简单的解决方案：

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

    我通过访问找到了这个：http://jaketrent.com/post/pushstate-webpack-dev-server/

    回复于
  • 5

    historyApiFallback 官方文档上的 historyApiFallback 选项清楚地解释了如何通过使用来实现

    historyApiFallback: true

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

    要么

    // output.publicPath: '/foo-app/'
historyApiFallback: {
  index: '/foo-app/'
}
    回复于
  • 6

    我的情况有点不同，因为我在运行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"},
    回复于
  • 51

    这样对我有用

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

},

    致力于防暴应用

    回复于
  • 12

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

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

    回复于
  • 1

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

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

    我知道这个问题适用于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 .

    回复于

相关问题