webpack bundle fails on reload?

问题

I think the problem is not with react router configuration but my index.html not being able to detect my script? This is my error:

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

this is my webpack config code:

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

and my 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>

Help?

回答1:

When using the HTML5 History API, the index.html page will likely have to be served in place of any 404 responses. Enable this by passing:

historyApiFallback: true

It's actually a pretty important concept and one you should grasp since this is a major component of any single page application (SPA). Also I feel you should take a deep dive into your webpack config file when you get the chance.

Here's a better, enriching explanation on the historyApiFallback option:

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.

Two great resources: Webpack Dev Server and connect-history-api-fallback documentation.

来源：https://stackoverflow.com/questions/45657732/webpack-bundle-fails-on-reload

标签

javascript

reactjs

Webpack

webpack-dev-server

webpack-2