Пакет webpack не работает при перезагрузке?

Я думаю, проблема не в конфигурации реактивного маршрутизатора, а в том, что мой index.html не может обнаружить мой скрипт? Это моя ошибка:

Не удалось загрузить ресурс: сервер ответил статусом 404 (не найден)

это мой код конфигурации веб-пакета:

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>

Помощь?


webpack reactjs javascript webpack-dev-server webpack-2
person gpbaculio    schedule 13.08.2017    source источник
comment
вы можете установить historyApiFallback в значение true?   -  person Govind Rai    schedule 13.08.2017
comment
@GovindRai спасибо, сейчас работаю   -  person gpbaculio    schedule 13.08.2017
comment
добавил более подробное объяснение .. взгляните!   -  person Govind Rai    schedule 13.08.2017

Ответы (1)


arrow_upward
0
arrow_downward

При использовании API истории HTML5 страницу index.html, скорее всего, придется обслуживать вместо любых ответов 404. Включите это, передав:

historyApiFallback: true

На самом деле это довольно важная концепция, и вы должны усвоить ее, поскольку это основной компонент любого одностраничного приложения (SPA). Также я считаю, что вам следует глубоко погрузиться в конфигурационный файл веб-пакета, когда у вас появится такая возможность.

Вот более подробное объяснение опции historyApiFallback:

Одностраничные приложения (SPA) обычно используют только один индексный файл, доступный для веб-браузеров: обычно index.html. Затем навигация в приложении обычно осуществляется с помощью JavaScript с помощью HTML5 History API. Это приводит к проблемам, когда пользователь нажимает кнопку обновления или напрямую обращается к странице, отличной от целевой, например / help или / help / online, поскольку веб-сервер обходит индексный файл, чтобы найти файл в этом месте. Поскольку ваше приложение является SPA, веб-сервер не сможет получить файл и вернуть пользователю сообщение 404 - Not Found.

Два замечательных ресурса: Webpack Dev Server и документация по подключению-истории-api-fallback.

person Govind Rai    schedule 13.08.2017