React Rails с Webpacker без горячей перезагрузки - PullRequest
Новая
       43

React Rails с Webpacker без горячей перезагрузки

0 голосов
/ 14 февраля 2019

Я добавил react-rails к существующему проекту, который мы медленно переносим, ​​чтобы среагировать.

Текущий webpacker.yml 

default: &default
  source_path: app/javascript
  source_entry_path: packs
  public_output_path: packs
  cache_path: tmp/cache/webpacker

  # Additional paths webpack should lookup modules
  # ['app/assets', 'engine/foo/app/assets']
  resolved_paths: []

  # Reload manifest.json on all requests so we reload latest compiled packs
  cache_manifest: false

  extensions:
    - .jsx
    - .js
    - .sass
    - .scss
    - .css
    - .module.sass
    - .module.scss
    - .module.css
    - .png
    - .svg
    - .gif
    - .jpeg
    - .jpg
    - .tsx
    - .ts

development:
  <<: *default
  compile: true

  # Reference: https://webpack.js.org/configuration/dev-server/
  dev_server:
    https: false
    host: localhost
    port: 3035
    public: localhost:3035
    hmr: true
    # Inline should be set to true if using HMR
    inline: true
    overlay: true
    compress: true
    disable_host_check: true
    use_local_ip: false
    quiet: false
    headers:
      'Access-Control-Allow-Origin': '*'
    watch_options:
      ignored: /node_modules/

Я загружаю приложение rails в одном терминале и ./bin/webpack-dev-server в другом, и я вижу горячие модули, появляющиеся в компиляции: 

[./node_modules/webpack-dev-server/client/index.js?http://localhost:3035] (webpack)-dev-server/client?http://localhost:3035 7.93 kB {0} {1} [built]
[./node_modules/webpack-dev-server/client/overlay.js] (webpack)-dev-server/client/overlay.js 3.67 kB {0} {1} [built]
[./node_modules/webpack/hot/dev-server.js] (webpack)/hot/dev-server.js 1.61 kB {0} {1} [built]
[./node_modules/webpack/hot/emitter.js] (webpack)/hot/emitter.js 77 bytes {0} {1} [built]
[./node_modules/webpack/hot/log-apply-result.js] (webpack)/hot/log-apply-result.js 1.31 kB {0} {1} [built]
[./node_modules/webpack/hot/log.js] (webpack)/hot/log.js 1.04 kB {0} {1} [built]
   [0] multi (webpack)-dev-server/client?http://localhost:3035 webpack/hot/dev-server ./app/javascript/packs/application.js 52 bytes {1} [built]
   [1] multi (webpack)-dev-server/client?http://localhost:3035 webpack/hot/dev-server ./app/javascript/packs/server_rendering.js 52 bytes {0} [built]

Проблема в том, что когда я запускаю ./bin/webpack-dev-server, я получаю полное обновление страницы каждый раз, когда обновляю свои файлы реакции (вместо того, чтобы просто обновлять компоненты).Полное обновление страницы происходит только во время работы сервера dev.Кроме того, до полного обновления страницы я не вижу обновления компонента.

Итак, вопрос в том, почему webpack-dev-server сообщает об обновлении страницы браузера и почему компоненты не загружаются в горячем режиме?

1 Ответ

0 голосов
/ 24 февраля 2019

Так работает Webpack HMR. Если вы хотите включить HMR на ваших реактивных модулях, вы можете попробовать React Hot Loader с плагином Webpack

.Установите react-hot-loader с yarn

.Отредактируйте файл .babelrc и добавьте react-hot-loader/babel в список плагинов.

.Сделайте ваш React Component «горячим». 

import React from 'react'
import { hot } from 'react-hot-loader'

class Example extends React.Component {
}

export default hot(module)(Example);
...