Rails+Webpacker环境下无需启动webpack-dev-server加载资产的方法咨询

我之前处理过一模一样的问题，这个安全警告本质是开发环境下Webpacker默认让浏览器从webpack-dev-server拉取编译后的资产，当你没启动dev server时，Rails找不到对应的预编译资产，或者配置里的资产来源触发了浏览器的安全限制。下面是亲测有效的解决步骤：

1. 手动预编译开发环境的Webpack资产 #

Webpacker默认只在生产环境做资产预编译，咱们先手动给开发环境编译一次：

RAILS_ENV=development ./bin/webpack

执行完这个命令，Webpack会把React相关的npm包编译到public/packs目录下，Rails就能直接从本地静态目录加载这些资产，不用再依赖dev server了。

2. 修改Webpacker配置，关闭dev server依赖 #

打开config/webpacker.yml，找到development区块，调整这几个关键配置：

• 将dev_server: enabled设为false，彻底关闭对dev server的依赖
• 确保compile设为true，这样Rails检测到资产文件变化时会自动重新编译，不用每次手动跑上面的命令
• 确认public_output_path是packs（默认就是这个，不用改，但检查下更稳妥）

修改后的development配置大概长这样：

development:
  <<: *default
  compile: true
  dev_server:
    enabled: false
    # 其他dev server相关的配置（比如port、host）可以注释掉，留着也不影响

3. 调整内容安全策略（CSP）避免安全警告 #

那个安全警告大概率是CSP限制导致的，打开config/initializers/content_security_policy.rb，确保允许加载本地的packs资产：

Rails.application.config.content_security_policy do |policy|
  policy.script_src :self, :https, 'unsafe-inline', 'unsafe-eval'
  # 如果你本地Rails跑在3000端口，加上这个；端口不同就改成你的实际端口
  policy.connect_src :self, :https, 'http://localhost:3000'
end

注：unsafe-inline和unsafe-eval在开发环境是必要的（Webpack的热更新和React的源码映射需要），生产环境记得去掉，但咱们现在先解决开发环境的问题。

4. 重启Rails服务器 #

所有配置修改完后，一定要重启你的Rails服务器，让新配置生效。之后你直接启动Rails（rails s）就行，不用再开./bin/webpack-dev-server，资产就能正常加载，安全警告也会消失。

如果之后你修改了React组件或者npm包，Rails会自动重新编译资产，完全不用手动干预~

内容的提问来源于stack exchange，提问作者Mukarram Ali