webpack 捆绑包在重新加载时失败？

Question

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

Failed to load resource: the server responded with a status of 404 (Not Found)

这是我的 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 选项的更好、更丰富的解释：

Single Page Applications (SPA) typically only utilise one index file that is accessible by web browsers: usually index.html. Navigation in the application is then commonly handled using JavaScript with the help of the HTML5 History API. This results in issues when the user hits the refresh button or is directly accessing a page other than the landing page, e.g. /help or /help/online as the web server bypasses the index file to locate the file at this location. As your application is a SPA, the web server will fail trying to retrieve the file and return a 404 - Not Found message to the user.

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

webpack 捆绑包在重新加载时失败？

webpack bundle fails on reload?

javascript

reactjs

webpack

webpack-dev-server

webpack-2