如何更改 Rails 中的 webpacker 以监视 packs 文件夹之外的更改？

Question

我希望热模块重新加载以重新加载我的 JavaScript/React 文件中的更改

我正在通过webpacker development documentation

它说

此过程将监视 app/javascript/packs/*.js 中的更改

现在，我还想查看 packs 项目之外或整个 javascript 文件夹中的更改，并且还需要包含 .jsx 文件。

我不知道该怎么做。

这是我的webpacker 文件：

#!/usr/bin/env ruby

ENV['RAILS_ENV'] ||= ENV['RACK_ENV'] || 'development'
ENV['NODE_ENV']  ||= 'development'

require 'pathname'
ENV['BUNDLE_GEMFILE'] ||= File.expand_path('../../Gemfile',
                                           Pathname.new(__FILE__).realpath)

require 'bundler/setup'

require 'webpacker'
require 'webpacker/webpack_runner'

APP_ROOT = File.expand_path('..', __dir__)
Dir.chdir(APP_ROOT) do
  Webpacker::WebpackRunner.run(ARGV)
end

这是我的 webpacker 开发服务器文件

#!/usr/bin/env ruby

ENV['RAILS_ENV'] ||= ENV['RACK_ENV'] || 'development'
ENV['NODE_ENV']  ||= 'development'

require 'pathname'
ENV['BUNDLE_GEMFILE'] ||= File.expand_path('../../Gemfile',
                                           Pathname.new(__FILE__).realpath)

require 'bundler/setup'

require 'webpacker'
require 'webpacker/dev_server_runner'

APP_ROOT = File.expand_path('..', __dir__)
Dir.chdir(APP_ROOT) do
  Webpacker::DevServerRunner.run(ARGV)
end

Answer 1

我不确定我是否完全理解你的问题，但我遇到了一个问题，即默认的 rails webpack 服务器会重建每个 .js(x) 文件更改，并且需要很长时间的开发。我通过使用gem foreman解决了它

1. 安装foreman
2. 在项目根目录中创建Procfile.dev

web: bundle exec rails s -p 3001
webpacker: ruby ./bin/webpack-dev-server

1. 我的 webpack-dev-server

#!/usr/bin/env ruby

ENV["RAILS_ENV"] ||= ENV["RACK_ENV"] || "development"
ENV["NODE_ENV"]  ||= ENV["NODE_ENV"] || "development"

require "pathname"
ENV["BUNDLE_GEMFILE"] ||= File.expand_path("../../Gemfile",
  Pathname.new(__FILE__).realpath)

require "rubygems"
require "bundler/setup"

require "webpacker"
require "webpacker/dev_server_runner"
Webpacker::DevServerRunner.run(ARGV)

4. 和工头一起运行项目 foreman start -f Procfile.dev -p 3000

之后 - webpack 不再构建每个更改，并且重新加载代码更改所需的时间更少

你也可以更新你的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_output_path: 'packs'
  cache_path: tmp/cache/webpacker

  # Additional paths webpack should lookup modules
  resolved_paths: ['app/javascript/src']

  # 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

development:
  <<: *default
  compile: true

  # 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
    headers:
      'Access-Control-Allow-Origin': '*'
    watch_options:
      ignored: /node_modules/


production:
  <<: *default
  public_path: <%= ENV['ACTION_CONTROLLER_ASSET_HOST'] %>

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

  # Cache manifest.json for performance
  cache_manifest: true