2

我正在使用 Rails 6 和 webpacker 5.4.3 gem。我最近刚刚升级了几个节点包并添加了一个破坏热重载并且无法确定原因的节点包；这些是我升级/添加的软件包：

  • @rails/webpacker。从 5.1.1 到 5.4.3
  • webpack 从 4.39.4 到 4.46.0
  • webpack-dev-server 从 3.8.0 到 4.1.1
  • webpack-cli 4.9.1（添加）

TLDR；在我更新了一些节点包之后，看起来 webpack-dev-server 正在监视更改，但由于某种原因没有充当刷新浏览器的代理，事实上，webpacker 甚至可能根本没有读取 config/webpacker.yml，因为它是不使用指示的主机和端口..

到目前为止，我注意到的是，如果我在 2 个终端中运行以下命令......

$ ./bin/webpack-dev-server 和 $ rails s -b 0.0.0.0 -p 3333

...并更改我的一个反应组件（例如一些文本），我可以看到运行 webpack-dev-server (wds) 的终端执行以下操作：

  1. 了解变化。
  2. 生成一个新的哈希。
  3. 重新编译。

我还注意到此时我的public/packs/manifest.json文件得到了正确更新，但是在 js 文件夹中没有任何应该根据 wds 终端输出重新编译的 js 文件，例如：js/application-b46eee3e623901e06c18.js js/application-6c52adcc65de5c6db860.hot-update.js js/application-b46eee3e623901e06c18.js.map js/application-6c52adcc65de5c6db860.hot-update.js.map

话虽如此，浏览器永远不会像以前那样刷新视图。当我刷新浏览器以查看更改时，我可以看到运行 rails 服务器的终端表明 webpacker 重新编译所有内容。我可以看到更改，这只是重新编译，而不是热加载并且需要永远。

这是我的相关文件：

包.json

{
  "name": "estat",
  "private": true,
  "scripts": {
    "build:test": "NODE_ENV=test webpack --config webpack.config.js",
    "build:production": "NODE_ENV=production yarn install && NODE_ENV=production webpack --config webpack.config.js",
    "build:development": "NODE_ENV=development webpack -w --config webpack.config.js",
    "lint:eslint": "eslint ./app/javascript/components/**/*.{js,jsx};exit 0",
    "lint:eslint-fix": "eslint --fix ./app/javascript/components/**/*.{js,jsx};exit 0"
  },
  "dependencies": {
    "@babel/core": "^7.6.0",
    "@babel/plugin-proposal-class-properties": "^7.5.5",
    "@babel/plugin-transform-runtime": "^7.6.0",
    "@babel/preset-env": "^7.6.0",
    "@babel/preset-react": "^7.0.0",
    "@fortawesome/fontawesome-free": "^5.15.0",
    "@rails/webpacker": "^5.4.3",
    "babel-loader": "^8.0.6",
    "babel-plugin-transform-react-remove-prop-types": "^0.4.24",
    "babel-preset-react": "^6.24.1",
    "case-sensitive-paths-webpack-plugin": "^2.2.0",
    "elliptic": "^6.5.3",
    "es5-shim": "^4.5.13",
    "eslint-plugin-ramda": "^2.5.1",
    "http-proxy": "^1.18.1",
    "imports-loader": "^0.8.0",
    "jquery": "*",
    "jquery-ui-dist": "^1.12.1",
    "jstree": "^3.3.10",
    "mark.js": "^8.11.1",
    "moment": "^2.24.0",
    "node-forge": "^0.10.0",
    "node-sass": "^4.12.0",
    "prop-types": "^15.7.2",
    "ramda": "^0.27.0",
    "rc-year-calendar": "^1.0.2",
    "react": "^16.9.0",
    "react-big-calendar": "^0.33.2",
    "react-datepicker": "2.14.1",
    "react-dom": "^16.9.0",
    "react-modal": "^3.10.1",
    "react-redux": "^7.2.6",
    "react-select": "^3.0.4",
    "react_ujs": "^2.6.0",
    "redux": "^4.0.4",
    "redux-saga": "^1.0.5",
    "serialize-javascript": "^3.1.0",
    "webpack": "^4.46.0",
    "webpack-cli": "^4.9.1",
    "websocket-extensions": "^0.1.4",
    "yargs-parser": "13.1.2"
  },
  "version": "1.3.2",
  "devDependencies": {
    "eslint": "^7.32.0",
    "eslint-plugin-react": "^7.14.3",
    "webpack-dev-server": "4.1.1",
    "webpack-manifest-plugin": "^4.0.2"
  }
}

配置/webpacker.yml

# Note: You must restart bin/webpack-dev-server for changes to take effect

default: &default
  source_path: app/javascript
  source_entry_path: packs
  public_root_path: public
  public_output_path: packs
  cache_path: tmp/cache/webpacker
  check_yarn_integrity: false
  webpack_compile_output: true

  # 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

  # Extract and emit a css file
  extract_css: false

  static_assets_extensions:
    - .jpg
    - .jpeg
    - .png
    - .gif
    - .tiff
    - .ico
    - .svg
    - .eot
    - .otf
    - .ttf
    - .woff
    - .woff2

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

development:
  <<: *default
  compile: true

  # Verifies that correct packages and versions are installed by inspecting package.json, yarn.lock, and node_modules
  check_yarn_integrity: false

  # Reference: https://webpack.js.org/configuration/dev-server/
  dev_server:
    https: false
    host: localhost
    port: 3035
    public: localhost:3035
    hmr: false
    # 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
    pretty: false
    headers:
      'Access-Control-Allow-Origin': '*'
    static:
      watch:
         ignored: '**/node_modules/**'

test:
  <<: *default
  compile: true

  # Compile test packs to a separate directory
  public_output_path: packs-test

prod_shared: &prod_shared
  <<: *default

  # This environment depends on precompilation of packs prior to booting for performance.
  compile: false

  # Extract and emit a css file
  extract_css: true

  # Cache manifest.json for performance
  cache_manifest: true

devprod:
  <<: *prod_shared

preview:
  <<: *prod_shared

staging:
  <<: *prod_shared

staging-01 :
  <<: *prod_shared

production:
  <<: *prod_shared

配置/webpack/development.js

process.env.NODE_ENV = process.env.NODE_ENV || 'development'

const environment = require('./environment')

config = environment.toWebpackConfig()
config.output.filename = "js/[name]-[hash].js"

module.exports = config

任何帮助，将不胜感激。

4

1 回答 1

1

I was able to solve it by doing the below development.js

const ReactRefreshWebpackPlugin = require('@pmmmwh/react-refresh-webpack-plugin');

    const devServer = {
      port: 3035,
      client: { overlay: false },
      liveReload: false,
    };
    
    //plugins
    environment.plugins.append(
      'ReactRefreshWebpackPlugin',
      new ReactRefreshWebpackPlugin({
        overlay: {
          sockPort: devServer.port
        }
      })
    )
于 2022-01-28T23:37:35.620 回答