Question

我认为问题不在于路由器的反应配置，而是我的index.html无法检测到我的脚本？这是我的错误：

无法加载资源：服务器响应状态为404 （未找到）

这是我的webpack配置代码：

const compiler = webpack({
  entry: ['whatwg-fetch', path.resolve(__dirname, 'js', 'index.js')],
  module: {
    loaders: [
      {
        exclude: /node_modules/,
        loader: 'babel-loader',
        test: /\.js$/,
      },  
      {
        test: /\.css$/,
        loaders: ['style-loader', 'css-loader']
      }
    ],
  },
  output: {filename: 'app.js', path: '/'},
});

const app = new WebpackDevServer(compiler, {
  contentBase: '/public/',
  proxy: {'/graphql': `http://localhost:${GRAPHQL_PORT}`},
  publicPath: '/js/',
  stats: {colors: true},
  historyApiFallback: {
    index: 'index.html' 
  } 
});

和我的index.html

<!doctype html>
<html lang="en" data-framework="relay">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.11/semantic.min.css">
    <title>Relay • TodoMVC</title>
  </head>
  <body>
    <div id="root"></div>
    <script type="text/javascript">
      // Force `fetch` polyfill to workaround Chrome not displaying request body
      // in developer tools for the native `fetch`.
      self.fetch = null;
    </script>
    <script src="http://localhost:4000/webpack-dev-server.js"></script>
    <script src="js/app.js"></script>
  </body>
</html>

帮助？

Answer 1

使用HTML5历史记录API时，可能必须提供index.html页面来代替任何404响应。通过传递：

启用此功能

historyApiFallback: true

这实际上是一个非常重要的概念，您应该掌握，因为这是任何单页面应用程序（SPA）的主要组成部分。此外，我觉得你有机会深入了解你的webpack配置文件。

以下是有关historyApiFallback选项的更好，更丰富的解释：

单页应用程序（SPA）通常只使用一个索引文件 Web浏览器可以访问：通常是index.html。导航然后通常使用JavaScript处理应用程序 HTML5 History API的帮助。这导致用户出现问题点击刷新按钮或直接访问除以外的页面着陆页，例如/ help或/ help / online作为Web服务器绕过用于在此位置查找文件的索引文件。身为你的应用程序是SPA，Web服务器将尝试检索失败文件并向用户返回404 - Not Found消息。

两个很棒的资源：Webpack Dev Server和connect-history-api-fallback documentation。

webpack包重新加载失败？

1 个答案: